@redocly/theme 0.0.0-react18-20231120182601

package/src/components/JsonViewer/JsonViewer.tsx

@@ -0,0 +1,226 @@
+import React, { memo, useRef } from 'react';
+import styled from 'styled-components';
+
+import { jsonToHTML } from '@theme/utils';
+import { useMount, useUnmount } from '@theme/hooks';
+import { CodeBlock } from '@theme/components/CodeBlock';
+
+export interface JsonProps {
+  data: any;
+  className?: string;
+  jsonSampleExpandLevel: number;
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+  onCopyClick?: () => void;
+}
+
+function JsonComponent({
+  data,
+  jsonSampleExpandLevel,
+  className,
+  withLineNumbers,
+  startLineNumber,
+  onCopyClick,
+}: JsonProps): JSX.Element {
+  const node = useRef<HTMLPreElement | null>(null);
+
+  useMount(() => {
+    node?.current?.addEventListener('click', clickListener);
+  });
+
+  useUnmount(() => {
+    node?.current?.removeEventListener('click', clickListener);
+  });
+
+  const setRef = (instance?: HTMLPreElement | null) => {
+    if (instance) node.current = instance;
+  };
+
+  const showFoldingButtons =
+    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+
+  const expandAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    for (const collapsed of Array.prototype.slice.call(elements)) {
+      const parentNode = collapsed.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.remove('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'collapse');
+    }
+  };
+
+  const collapseAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    // skip first item to avoid collapsing whole object/array
+    const elementsArr = Array.prototype.slice.call(elements, 1);
+
+    for (const expanded of elementsArr) {
+      const parentNode = expanded.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.add('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'expand');
+    }
+  };
+
+  const collapseElement = (target: HTMLElement) => {
+    if (target.parentElement && target.className === 'collapser') {
+      const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
+      if (collapsed?.parentElement?.classList.contains('collapsed')) {
+        collapsed.parentElement.classList.remove('collapsed');
+        target.setAttribute('aria-label', 'collapse');
+      } else {
+        collapsed?.parentElement?.classList.add('collapsed');
+        target.setAttribute('aria-label', 'expand');
+      }
+    }
+  };
+
+  const clickListener = (event: MouseEvent) => {
+    collapseElement(event.target as HTMLElement);
+  };
+
+  return (
+    <JsonViewerWrap
+      data-cy="json-viewer"
+      data-component-name="JsonViewer/JsonViewer"
+      className={className}
+    >
+      <CodeBlock
+        header={{
+          controls: {
+            copy: { data, onClick: onCopyClick, handleOutside: true },
+            expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+            collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+          },
+        }}
+        codeBlockRef={setRef}
+        withLineNumbers={withLineNumbers}
+        highlightedHtml={jsonToHTML(data, jsonSampleExpandLevel, startLineNumber)}
+      />
+    </JsonViewerWrap>
+  );
+}
+
+export const Json = memo<JsonProps>(JsonComponent);
+
+export const JsonViewer = styled(Json).attrs(() => ({
+  'data-component-name': 'JsonViewer/JsonViewer',
+}))<JsonProps>`
+  .redoc-json code {
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-secondary);
+    padding: inherit;
+    border: none;
+  }
+
+  pre {
+    contain: content;
+    overflow-x: auto;
+    position: relative;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+    &.line-numbers {
+      padding: 20px 20px 20px 3em;
+
+      *[data-line]:not(.collapsed *[data-line]) {
+        &:before {
+          content: attr(data-line);
+          position: absolute;
+          left: 0;
+          min-width: 2em;
+          text-align: right;
+          pointer-events: none;
+          user-select: none;
+          padding: 0 0.5em;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .callback-function {
+      color: gray;
+    }
+
+    .ellipsis:after {
+      content: ' … ';
+    }
+
+    .collapsible {
+      padding-left: 2ch;
+      display: inline-block;
+    }
+
+    .hoverable {
+      padding: 1px 2px;
+      display: inline-block;
+    }
+
+    .collapsed {
+      white-space: nowrap;
+
+      & > .collapser:after {
+        content: '+';
+      }
+    }
+
+    .hovered {
+      background-color: rgba(235, 238, 249, 1);
+    }
+
+    .collapser {
+      --size: 15px;
+      --margin-right: 3px;
+
+      display: inline-block;
+      background-color: transparent;
+      border: 0;
+      padding: 1px;
+      color: var(--text-secondary);
+      width: var(--size);
+      height: var(--size);
+      margin-left: calc((var(--size) + var(--margin-right)) * -1);
+      margin-right: var(--margin-right);
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      font-family: var(--code-font-family);
+      font-size: var(--code-font-size);
+
+      &:after {
+        content: '-';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+      }
+
+      &:focus {
+        outline: #fff dotted 1px;
+      }
+    }
+
+    .selected {
+      outline-width: 1px;
+      outline-style: dotted;
+    }
+
+    .collapsed > .collapsible {
+      display: none;
+    }
+
+    .ellipsis {
+      display: none;
+    }
+
+    .collapsed > .ellipsis {
+      display: inline;
+    }
+  }
+`;
+
+export const JsonViewerWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;

package/src/components/JsonViewer/index.ts

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

package/src/components/LastUpdated/LastUpdated.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { format } from 'timeago.js';
+
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useI18nConfig, useTranslate } from '@portal/hooks';
+
+import { DEFAULT_LOCALE_PLACEHOLDER } from '../../types/portal/src/shared/constants';
+
+const FORMATS = {
+  timeago: (date: Date, locale: string) => format(date, locale),
+  iso: (date: Date) => date.toISOString().split('T')[0],
+  short: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+  long: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+};
+
+export interface LastUpdatedProps {
+  lastModified: Date;
+  format?: keyof typeof FORMATS;
+  locale?: string;
+  className?: string;
+}
+
+export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
+  const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
+  const { translate } = useTranslate();
+  const { currentLocale } = useI18nConfig();
+
+  if (lastUpdatedBlock?.hide) {
+    return null;
+  }
+
+  const lastModified = props.lastModified;
+  const format = props.format || lastUpdatedBlock.format || 'timeago';
+  const locale =
+    props.locale ||
+    lastUpdatedBlock.locale ||
+    (currentLocale !== DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
+
+  const isoDate = lastModified.toISOString().split('T')[0];
+
+  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
+  const translationKey =
+    format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
+
+  const text =
+    format === 'timeago'
+      ? translate(translationKey, 'Last updated') + ' '
+      : translate(translationKey, 'Last updated on');
+
+  return (
+    <Wrapper
+      className={props.className}
+      data-component-name="LastUpdated/LastUpdated"
+      rawOnPrint={format === 'timeago'}
+      data-print-datetime={isoDate}
+      data-translation-key={translationKey}
+    >
+      {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
+      <time dateTime={isoDate}>{lastUpdatedString}</time>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<{ rawOnPrint?: boolean }>`
+  color: var(--last-updated-text-color);
+  font-size: var(--last-updated-font-size);
+  font-family: var(--last-updated-font-family);
+  line-height: var(--last-updated-line-height);
+  padding-bottom: 30px;
+
+  ${({ rawOnPrint }) =>
+    rawOnPrint &&
+    `@media print {
+      time {
+        display: none;
+      }
+      &::after {
+        content: attr(data-print-datetime);
+      }
+    }
+  `}
+`;

package/src/components/LastUpdated/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/components/LastUpdated/LastUpdated';
+export * from '@theme/components/LastUpdated/styledVariables';

package/src/components/LastUpdated/styledVariables.ts

@@ -0,0 +1,8 @@
+import { css } from "styled-components";
+
+export const lastUpdated = css`
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;

package/src/components/Markdown/Admonition.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
+
+interface AdmonitionTypeProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+}
+
+export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+  name?: string;
+  className?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+}
+
+export function Admonition({
+  type = 'info',
+  name,
+  children,
+  className,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+  return (
+    <Wrapper
+      type={type}
+      className={className}
+      data-component-name="Markdown/Admonition"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <AlertIcon type={type} />
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        <Content>{children}</Content>
+      </TextContainer>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<AdmonitionTypeProps>`
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
+  ${({ type }) => `
+    background-color: var(--admonition-${type}-background-color);
+    color: var(--admonition-${type}-text-color);
+    border: var(--admonition-${type}-border);
+  `}
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
+
+const Heading = styled.div<AdmonitionTypeProps>`
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
+
+  && {
+    font-size: var(--admonition-heading-font-size);
+    font-weight: var(--admonition-heading-font-weight);
+    line-height: var(--admonition-line-height);
+    text-transform: var(--admonition-heading-transform);
+  }
+`;
+
+const Content = styled.div`
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;

package/src/components/Markdown/ContainerWrapper.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ContainerWrapper = styled.section.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Markdown/ContainerWrapper',
+  className,
+}))<{ withToc: boolean }>`
+  max-width: var(--md-container-max-width);
+  width: 90%;
+  margin: 0 auto;
+
+  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
+
+  article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading
+    margin-top: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
+  }
+`;

package/src/components/Markdown/Details.tsx

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

package/src/components/Markdown/Heading.tsx

@@ -0,0 +1,47 @@
+import React, { createElement } from 'react';
+
+import type { PropsWithChildren } from 'react';
+
+import { concatClassNames } from '@theme/utils';
+import { AnchorIcon } from '@theme/icons';
+
+/**
+ * Class name for all MD tags
+ */
+const mdClassName = 'md';
+
+export function Heading({
+  level,
+  id,
+  children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+}: PropsWithChildren<{
+  level: number;
+  id: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+}>): JSX.Element {
+  const linkEl = (
+    <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
+      <AnchorIcon />
+    </a>
+  );
+
+  return createElement(
+    `h${level}`,
+    {
+      id,
+      className: concatClassNames('heading-anchor', mdClassName, className),
+      'data-component-name': 'Markdown/Heading',
+      'data-source': dataSource,
+      'data-hash': dataHash,
+    },
+    <>
+      {linkEl}
+      {children}
+    </>,
+  );
+}

package/src/components/Markdown/MarkdownLayout.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { PageWrapper } from '@theme/components/Markdown/PageWrapper';
+import { ContainerWrapper } from '@theme/components/Markdown/ContainerWrapper';
+import { PageNavigation } from '@theme/components/PageNavigation/PageNavigation';
+import { EditPageButton } from '@theme/components/EditPageButton';
+import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
+import { useThemeConfig } from '@theme/hooks';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { Breadcrumbs as ThemeBreadcrumbs } from '@theme/components/Breadcrumbs';
+
+type MarkdownLayoutProps = {
+  tableOfContent: React.ReactNode;
+  markdownWrapper: React.ReactNode;
+  feedback: React.ReactNode;
+  editPage?: {
+    to: string;
+  };
+  /** String in ISO format */
+  lastModified?: string | null;
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
+};
+
+export function MarkdownLayout({
+  tableOfContent,
+  markdownWrapper,
+  feedback,
+  editPage,
+  lastModified,
+  nextPage,
+  prevPage,
+  className,
+}: MarkdownLayoutProps): JSX.Element {
+  const { markdown } = useThemeConfig();
+
+  const { editPage: themeEditPage } = markdown || {};
+
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
+
+  return (
+    <PageWrapper data-component-name="Markdown/MarkdownLayout" className={className}>
+      <ContainerWrapper withToc={!markdown?.toc?.hide}>
+        <Breadcrumbs />
+        <LayoutTop>
+          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+          {mergedConf && <EditPageButton to={mergedConf.to} />}
+        </LayoutTop>
+        {markdownWrapper}
+        <LayoutBottom>{feedback}</LayoutBottom>
+        <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+      </ContainerWrapper>
+      {tableOfContent}
+    </PageWrapper>
+  );
+}
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+
+const Breadcrumbs = styled(ThemeBreadcrumbs)`
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
+
+const LayoutBottom = styled(LayoutTop)`
+  justify-content: center;
+  > * {
+    margin: 25px 5px;
+  }
+`;