@redocly/theme 0.10.0 → 0.11.0

package/src/JsonViewer/JsonViewer.tsx

@@ -1,256 +0,0 @@
-import React, { memo, useRef } from 'react';
-import styled from 'styled-components';
-
-import type { ReactElement } from 'react';
-
-import { CopyButtonWrapper } from '@theme/CopyButton';
-import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
-import { jsonToHTML } from '@theme/utils';
-import { useMount, useUnmount } from '@theme/hooks';
-import { CodeBlock } from '@theme/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<HTMLDivElement | null>(null);
-
-  useMount(() => {
-    node?.current?.addEventListener('click', clickListener);
-  });
-
-  useUnmount(() => {
-    node?.current?.removeEventListener('click', clickListener);
-  });
-
-  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);
-  };
-
-  const renderInner = ({ renderCopyButton }: { renderCopyButton: () => ReactElement }) => {
-    const showFoldingButtons =
-      data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-
-    return (
-      <JsonViewerWrap data-cy="json-viewer">
-        <SampleControls data-cy="buttons">
-          {renderCopyButton()}
-          {showFoldingButtons && (
-            <>
-              <SamplesControlButton onClick={expandAll} data-cy="expand-all">
-                Expand all
-              </SamplesControlButton>
-              <SamplesControlButton onClick={collapseAll} data-cy="collapse-all">
-                Collapse all
-              </SamplesControlButton>
-            </>
-          )}
-        </SampleControls>
-        <StyledCodeBlock
-          className={withLineNumbers ? `${className} line-numbers` : className}
-          ref={node}
-          dangerouslySetInnerHTML={{
-            __html: jsonToHTML(data, jsonSampleExpandLevel, startLineNumber),
-          }}
-        />
-      </JsonViewerWrap>
-    );
-  };
-
-  return (
-    <CopyButtonWrapper data-cy="copy-button" data={data} onCopyClick={onCopyClick}>
-      {renderInner}
-    </CopyButtonWrapper>
-  );
-}
-
-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-color-inverse);
-    padding: inherit;
-    border: none;
-  }
-
-  contain: content;
-  overflow-x: auto;
-  position: relative;
-  padding: 10px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-samples-code-block-background-color);
-  color: var(--text-color-inverse);
-  font-size: var(--code-font-size);
-  font-family: var(--code-font-family);
-  white-space: var(--code-wrap, pre);
-
-  &.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: #fff;
-    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;
-
-  &:hover > ${SampleControls} {
-    opacity: 1;
-  }
-`;
-
-export const StyledCodeBlock = styled(CodeBlock)`
-  flex: 1;
-
-  code {
-    font-family: var(--code-font-family);
-    font-size: 14px;
-    line-height: 18px;
-  }
-`;

package/src/JsonViewer/index.ts

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

package/src/Layout/RootLayout.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface LayoutConfig {
-  navbar: React.ReactNode;
-  footer: React.ReactNode;
-}
-
-const Wrapper = styled.div``;
-
-export function RootLayout({
-  navbar,
-  footer,
-  children,
-}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
-  return (
-    // TODO: rewrite it to avoid passing components as props
-    <Wrapper data-component-name="Layout/RootLayout">
-      {navbar}
-      {children}
-      {footer}
-    </Wrapper>
-  );
-}

package/src/Layout/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/Layout/RootLayout';
-export * from '@theme/Layout/PageLayout';

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,236 +0,0 @@
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ClipboardService } from '@theme/utils/ClipboardService';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { ReportDialog, useReportDialog } from '@theme/Feedback';
-
-export type CodeSampleProps = {
-  language: string;
-  highlighted: string;
-  rawContent: string;
-  'data-source'?: string;
-  'data-hash'?: string;
-};
-
-export function CodeSample({
-  rawContent,
-  highlighted,
-  language,
-  'data-source': dataSource,
-  'data-hash': dataHash,
-}: CodeSampleProps): JSX.Element {
-  const langClassName = language ? `language-${language}` : '';
-  const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
-
-  const [isCopied, setIsCopied] = useState(false);
-  const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } =
-    useReportDialog(report);
-
-  const copyCode = (code: string) => {
-    ClipboardService.copyCustom(code);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
-  };
-
-  return (
-    <Wrapper
-      className="code-sample"
-      data-component-name="Markdown/CodeSample/CodeSample"
-      data-source={dataSource}
-      data-hash={dataHash}
-    >
-      <CodeSampleButtonContainer>
-        {!copy.hide && (
-          <>
-            {!isCopied && (
-              <Button
-                onClick={() => copyCode(rawContent)}
-                title={copy.tooltipText || 'Copy to clipboard'}
-              >
-                {copy.buttonText || 'Copy'}
-              </Button>
-            )}
-            {isCopied && <DoneIndicator>{copy.toasterText || 'Copied!'}</DoneIndicator>}
-          </>
-        )}
-
-        {isReportButtonShown && <Button {...reportButtonProps}>Report</Button>}
-
-        {isReportDialogShown && <ReportDialog {...reportDialogProps} location={rawContent} />}
-      </CodeSampleButtonContainer>
-      <pre className={langClassName}>
-        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
-      </pre>
-    </Wrapper>
-  );
-}
-
-const CodeSampleButtonContainer = styled.div`
-  display: flex;
-  position: absolute;
-  top: 12px;
-  right: 5px;
-`;
-
-const Button = styled.div`
-  padding: var(--code-block-controls-padding);
-  border-radius: var(--code-block-controls-border-radius);
-  font-size: var(--code-block-controls-font-size);
-  font-family: var(--code-block-controls-font-family);
-  &:hover {
-    cursor: pointer;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const DoneIndicator = styled.div`
-  padding: var(--code-block-controls-padding);
-  border-radius: var(--code-block-controls-border-radius);
-  font-size: var(--code-block-controls-font-size);
-  font-family: var(--code-block-controls-font-family);
-  cursor: default;
-`;
-
-const darkStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-  .token.property,
-  .token.tag,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: #62bff9;
-  }
-  .token.boolean {
-    color: firebrick;
-  }
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a0fbaa;
-    & + a,
-    & + a:visited {
-      color: #4ed2ba;
-      text-decoration: underline;
-    }
-  }
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: hsl(40, 90%, 60%);
-  }
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-  .token.deleted {
-    color: red;
-  }
-`;
-
-const Wrapper = styled.div`
-  overflow: auto;
-  border-radius: 4px;
-  position: relative;
-
-  ${Button},
-  ${DoneIndicator} {
-    color: var(--code-block-controls-text-color);
-    background-color: var(--code-block-controls-background-color);
-    opacity: var(--code-block-controls-opacity);
-  }
-  ${Button}:hover {
-    color: var(--code-block-controls-hover-text-color);
-    background-color: var(--code-block-controls-hover-background-color);
-    opacity: var(--code-block-controls-active-opacity);
-  }
-
-  pre {
-    white-space: var(--code-wrap);
-    color: white;
-    padding: 12px 14px 15px 14px;
-    overflow-x: auto;
-    line-height: normal;
-    border-radius: var(--code-block-border-radius);
-    font-family: var(--code-font-family);
-    background-color: var(--code-block-background-color);
-
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-
-    code {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      color: var(--code-block-text-color);
-      &:before,
-      &:after {
-        content: none;
-      }
-    }
-  }
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-    border: 0;
-    border-radius: var(--border-radius);
-  }
-  code[class='language-text'] {
-    line-height: 1.2em;
-    display: inline-flex;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-    .token.important,
-    .token.bold {
-      font-weight: bold;
-    }
-    .token.italic {
-      font-style: italic;
-    }
-    .token.entity {
-      cursor: help;
-    }
-    .token.punctuation {
-      opacity: 0.7;
-    }
-    .namespace {
-      opacity: 0.7;
-    }
-
-    ${darkStyleTokens};
-  }
-`;

package/src/Markdown/CodeSample/index.ts

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

package/src/Markdown/MarkdownLayout.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { PageWrapper } from '@theme/Markdown/PageWrapper';
-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;
-  markdownWrapper: React.ReactNode;
-  feedback: React.ReactNode;
-  editPage?: {
-    to: string;
-    text: string;
-    icon?: string;
-  };
-  /** String in ISO format */
-  lastModified?: string | null;
-};
-
-export function MarkdownLayout({
-  tableOfContent,
-  markdownWrapper,
-  feedback,
-  editPage,
-  lastModified,
-}: MarkdownLayoutProps): JSX.Element {
-  const { markdown } = useThemeConfig();
-  const { editPage: themeEditPage } = markdown || {};
-
-  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
-
-  return (
-    <PageWrapper data-component-name="Markdown/MarkdownLayout">
-      <ContainerWrapper withToc={true}>
-        <LayoutTop>
-          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {mergedConf && (
-            <EditPageButton text={mergedConf.text} to={mergedConf.to} icon={mergedConf.icon} />
-          )}
-        </LayoutTop>
-        {markdownWrapper}
-        <LayoutBottom>{feedback}</LayoutBottom>
-        <PageNavigation />
-      </ContainerWrapper>
-      {tableOfContent}
-    </PageWrapper>
-  );
-}
-
-const LayoutTop = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-
-const LayoutBottom = styled(LayoutTop)`
-  > * {
-    margin: 25px 5px;
-  }
-`;

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { PropsWithChildren } from 'react';
-
-import { Tab } from '@theme/Markdown/Tabs/Tab';
-
-type Child = { props: { label: string } & TabsProps };
-type TabsProps = PropsWithChildren<{ children: Child[] }>;
-
-export function Tabs(props: TabsProps): JSX.Element {
-  const children = React.Children.toArray(props.children) as Child[];
-  const [activeTab, setActiveTab] = useState(children[0]?.props.label);
-  const onTabSelect = (label: string) => setActiveTab(label);
-
-  return (
-    <TabsContainer data-component-name="Markdown/Tabs/Tabs">
-      <TabList>
-        {children.map((child) => {
-          const { label } = child.props;
-          return <Tab activeTab={activeTab} key={label} label={label} onClick={onTabSelect} />;
-        })}
-      </TabList>
-      <TabContent>
-        {children.map((child) => {
-          if (child.props.label !== activeTab) return undefined;
-          return child.props.children;
-        })}
-      </TabContent>
-    </TabsContainer>
-  );
-}
-
-const TabsContainer = styled.div`
-  margin: 10px 0;
-
-  ol[class^='Tabs__TabList'] {
-    margin: 0;
-    padding: 0;
-  }
-`;
-
-const TabList = styled.ol`
-  color: var(--md-tabs-tab-text-color);
-  padding: 0;
-  margin-block-end: 0;
-  border: solid var(--color-secondary-400);
-  border-width: 0 0 1px 0;
-
-  li[class^='Tab__TabItem'] {
-    margin: 0;
-    margin-bottom: -1px;
-  }
-`;
-
-const TabContent = styled.div`
-  padding: 1rem 0;
-`;

package/src/Markdown/Tabs/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/Markdown/Tabs/Tab';
-export * from '@theme/Markdown/Tabs/Tabs';

package/src/Markdown/index.ts

@@ -1,10 +0,0 @@
-export * from '@theme/Markdown/Admonition';
-export * from '@theme/Markdown/CodeSample';
-export * from '@theme/Markdown/ContainerWrapper';
-export * from '@theme/Markdown/Heading';
-export * from '@theme/Markdown/MarkdownLayout';
-export * from '@theme/Markdown/MarkdownWrapper';
-export * from '@theme/Markdown/Mermaid';
-export * from '@theme/Markdown/PageWrapper';
-export * from '@theme/Markdown/Sup';
-export * from '@theme/Markdown/Tabs';