@redocly/theme 0.1.6 → 0.1.9

package/src/JsonViewer/JsonViewer.tsx

@@ -1,13 +1,12 @@
 import React, { memo, useRef, ReactElement } from 'react';
 import styled from 'styled-components';
 
-import { CopyButtonWrapper } from '../CopyButton';
-import { SampleControls, SamplesControlButton } from '../SamplesPanelControls';
-import { jsonToHTML } from '../utils';
-import { useMount, useUnmount } from '../hooks';
-import { CodeBlock } from '../CodeBlock';
-
-import { jsonStyles } from './styled';
+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';
+import { jsonStyles } from '@theme/JsonViewer/styled';
 
 export interface JsonProps {
   data: any;

package/src/JsonViewer/__tests__/JsonViewer.test.tsx

@@ -2,7 +2,8 @@ import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme } from '../../../tests/utils';
-import { JsonViewer } from '../JsonViewer';
+
+import { JsonViewer } from '@theme/JsonViewer';
 
 const data = {
   id: '600dc3b5d617e547a0e74cb9',

package/src/JsonViewer/index.ts

@@ -1 +1,2 @@
 export * from './JsonViewer';
+export * from './styled';

package/src/Layout/PageLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface PageLayoutProps {
+  sidebar?: React.ReactNode;
+}
+
+export function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
+  return (
+    <Container data-component-name="Layout/PageLayout">
+      {sidebar}
+      <ContentContainer>{children}</ContentContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+`;
+
+const ContentContainer = styled.div`
+  flex: 1 0 0;
+  /*
+    flex-basis is ignored for nested flex in Chrome, need to set width
+    See more here: https://stackoverflow.com/a/34355447
+  */
+  width: 0;
+  max-width: 100%;
+`;

package/src/Layout/RootLayout.tsx

@@ -0,0 +1,24 @@
+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

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

package/src/Logo/Logo.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
-
-export interface LogoConfig {
-  image?: string;
-  altText?: string;
-  link?: string;
-  favicon?: string;
-}
+import { LogoConfig } from '@theme/types/portal';
 
 export function Logo({ logo }: { logo: LogoConfig }): JSX.Element | null {
   const img = <NavLogo src={logo.image} alt={logo.altText} data-component-name="Logo/Logo" />;

package/src/Logo/index.ts

@@ -0,0 +1 @@
+export * from './Logo';

package/src/Markdown/Admonition.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { AlertIcon } from '@theme/ui/AlertIcon';
+
+interface AdmonitionTypeProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+}
+
+interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+  name?: string;
+}
+
+export function Admonition({
+  type = 'info',
+  name,
+  children,
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+  return (
+    <Wrapper type={type} data-component-name="Markdown/Admonition/Admonition">
+      <AlertIcon type={type} />
+      {name ? <Heading type={type}>{name}</Heading> : null}
+      <Content>{children}</Content>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<AdmonitionTypeProps>`
+  position: relative;
+  align-items: center;
+  margin: var(--alert-margin-vertical) var(--alert-margin-horizontal);
+  padding: var(--alert-padding-vertical) var(--alert-padding-horizontal);
+  padding-left: calc(var(--alert-padding-horizontal) * 2 + var(--alert-icon-size));
+  border-radius: var(--alert-border-radius);
+  font-size: var(--alert-font-size);
+  font-weight: var(--alert-font-weight);
+  line-height: var(--alert-line-height);
+
+  ${({ type }) => `
+    background-color: var(--alert-${type}-background-color);
+    color: var(--alert-${type}-text-color);
+  `}
+`;
+
+const Heading = styled.h5<AdmonitionTypeProps>`
+  display: block;
+  margin: 0 0 10px;
+
+  letter-spacing: var(--alert-heading-letter-spacing);
+  color: ${({ type }) => `var(--alert-${type}-heading-color)`};
+
+  && {
+    font-size: var(--alert-heading-font-size);
+    font-weight: var(--alert-heading-font-weight);
+    line-height: var(--alert-line-height);
+    transform: var(--alert-heading-transform);
+  }
+`;
+
+const Content = styled.div`
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { ClipboardService } from '@theme/utils/ClipboardService';
+import {
+  Wrapper,
+  DoneIndicator,
+  CopyCodeButton,
+  CodeSampleButtonContainer,
+} from '@theme/Markdown/CodeSample/styled';
+
+type CodeSampleProps = {
+  language: string;
+  highlighted: string;
+  rawContent: string;
+};
+
+export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+  const langClassName = language ? `language-${language}` : '';
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyCode = (code: string) => {
+    ClipboardService.copyCustom(code);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
+        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
+      </CodeSampleButtonContainer>
+      <pre className={langClassName}>
+        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+    </Wrapper>
+  );
+}

package/src/Markdown/CodeSample/index.ts

@@ -0,0 +1,3 @@
+export * from './CodeSample';
+export * from './styled';
+export * from './types';

package/src/Markdown/CodeSample/styled.ts

@@ -0,0 +1,289 @@
+import { getLuminance } from 'polished';
+import styled, { css } from 'styled-components';
+
+import { typography } from '@theme/ui/Typography';
+import type { Tokens, Token } from '@theme/Markdown/CodeSample/types';
+import { AppTheme } from '@theme/types/portal';
+
+function genTokens(tokens?: Tokens | null) {
+  if (!tokens) {
+    return '';
+  }
+
+  let res = '';
+
+  for (const token of Object.keys(tokens)) {
+    if (token !== 'default') {
+      res += `.token.${token} { color: ${tokens[token as Token]?.color}; }\n`;
+    }
+  }
+
+  if (tokens.default) {
+    return css`
+      pre& {
+        ${typography(tokens.default)}
+      }
+      ${res}
+    `;
+  }
+
+  return res;
+}
+
+const getCodeBlockBackgroundColor = (theme: AppTheme) =>
+  Array.isArray(theme.codeBlock.backgroundColor)
+    ? theme.codeBlock.backgroundColor[0]
+    : theme.codeBlock.backgroundColor;
+
+export const CodeButton = css`
+  padding: 0 5px;
+  border-radius: 4px;
+`;
+
+export const CodeSampleButtonContainer = styled.div`
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+
+export const CopyCodeButton = styled.div`
+  ${CodeButton}
+  display: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const DoneIndicator = styled.div`
+  ${CodeButton}
+  cursor: default;
+`;
+
+const lightStyleCodeButton = css`
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+
+  ${CopyCodeButton}:hover {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+    outline: 1px solid ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+`;
+
+const darkStyleCodeButton = css`
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+
+  ${CopyCodeButton}:hover {
+    color: white;
+    color: ${({ theme }) => theme.codeBlock.copyButton.contrastText};
+    background-color: ${({ theme }) => theme.codeBlock.copyButton.background};
+  }
+`;
+
+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,
+  .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;
+  }
+`;
+
+export const Wrapper = styled.div`
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${({ theme }) =>
+    getLuminance(getCodeBlockBackgroundColor(theme)) < 0.25
+      ? darkStyleCodeButton
+      : lightStyleCodeButton}
+
+  &:hover {
+    ${CodeSampleButtonContainer} ${CopyCodeButton} {
+      display: block;
+    }
+  }
+
+  pre {
+    white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: 4px;
+
+    font-family: ${({ theme }) => theme.typography.code.fontFamily};
+    background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
+
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+
+      color: ${({ theme }) =>
+        getLuminance(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34'};
+
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: ${({ theme }) => theme.shape.borderRadius};
+  }
+
+  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;
+    }
+
+    ${({ theme }) =>
+      getLuminance(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens}
+    ${({ theme }) => genTokens(theme.codeBlock.tokens)}
+  }
+`;

package/src/Markdown/CodeSample/types.ts

@@ -0,0 +1,40 @@
+import { ITypography } from '@theme/ui/Typography';
+
+export type Token =
+  | 'comment'
+  | 'prolog'
+  | 'doctype'
+  | 'cdata'
+  | 'punctuation'
+  | 'property'
+  | 'tag'
+  | 'number'
+  | 'constant'
+  | 'symbol'
+  | 'boolean'
+  | 'selector'
+  | 'string'
+  | 'char'
+  | 'builtin'
+  | 'inserted'
+  | 'operator'
+  | 'entity'
+  | 'url'
+  | 'variable'
+  | 'atrule'
+  | 'keyword'
+  | 'regex'
+  | 'important'
+  | 'important'
+  | 'bold'
+  | 'italic'
+  | 'entity'
+  | 'deleted';
+
+export type Tokens = {
+  [P in Token]?: {
+    color: string;
+  };
+} & {
+  default?: ITypography;
+};

package/src/Markdown/ContentWrapper.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const ContentWrapper = styled.section.attrs(() => ({
+  'data-component-name': 'Markdown/ContentWrapper',
+}))<{ withToc: boolean }>`
+  max-width: var(--content-wrapper-max-width);
+  width: 90%;
+  margin: 0 auto;
+
+  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);
+
+  & > article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading if there is no "Last updated at" block
+    /* margin-top: 0; */
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
+  }
+`;

package/src/Markdown/Heading.tsx

@@ -0,0 +1,35 @@
+import React, { createElement, PropsWithChildren } from 'react';
+
+const SvgIcon = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="16"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+    ></path>
+  </svg>
+);
+
+export function Heading({
+  level,
+  id,
+  children,
+}: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
+  const linkEl = (
+    <a href={`#${id}`} className="anchor before">
+      {SvgIcon}
+    </a>
+  );
+
+  return createElement(
+    `h${level}`,
+    { id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' },
+    [linkEl, children],
+  );
+}

package/src/Markdown/MarkdownLayout.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { PageWrapper } from '@theme/Markdown/PageWrapper';
+import { ContentWrapper } from '@theme/Markdown/ContentWrapper';
+import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+
+type MarkdownLayoutProps = {
+  tableOfContent: React.Component;
+  markdownWrapper: React.Component;
+};
+
+export function MarkdownLayout({
+  tableOfContent,
+  markdownWrapper,
+}: MarkdownLayoutProps): JSX.Element {
+  return (
+    <PageWrapper data-component-name="Markdown/MarkdownLayout">
+      <ContentWrapper withToc={true}>
+        {markdownWrapper}
+        <PageNavigation />
+      </ContentWrapper>
+      {tableOfContent}
+    </PageWrapper>
+  );
+}

package/src/Markdown/Mermaid.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type MermaidProps = {
+  diagramHtml: string;
+};
+
+export function Mermaid({ diagramHtml }: MermaidProps): JSX.Element {
+  return (
+    <Wrapper
+      className="mermaid-wrapper"
+      dangerouslySetInnerHTML={{ __html: diagramHtml }}
+      data-component-name="Markdown/Mermaid/Mermaid"
+    />
+  );
+}
+
+const Wrapper = styled.div`
+  .mermaid > svg {
+    font-size: 14px !important;
+    max-width: 100%;
+  }
+`;

package/src/Markdown/PageWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const PageWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Markdown/PageWrapper',
+}))`
+  display: flex;
+  flex: 1;
+  width: 100%;
+`;