@redocly/theme 0.1.10 → 0.1.13

package/src/Layout/__tests__/PageLayout.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { PageLayout } from '@theme/Layout/PageLayout';
-
-describe('PageLayout', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <PageLayout sidebar={<div>sidebar</div>}>
-        <div>test content</div>
-      </PageLayout>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Layout/__tests__/RootLayout.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { RootLayout } from '@theme/Layout/RootLayout';
-
-describe('RootLayout', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <RootLayout footer={<div>footer</div>} navbar={<div>navbar</div>}>
-        <div>content</div>
-      </RootLayout>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageLayout renders 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height));
-}
-
-.c1 {
-  -webkit-flex: 1 0 0;
-  -ms-flex: 1 0 0;
-  flex: 1 0 0;
-  width: 0;
-  max-width: 100%;
-}
-
-<div
-  class="c0"
-  data-component-name="Layout/PageLayout"
->
-  <div>
-    sidebar
-  </div>
-  <div
-    class="c1"
-  >
-    <div>
-      test content
-    </div>
-  </div>
-</div>
-`;

package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RootLayout renders 1`] = `
-<div
-  class=""
-  data-component-name="Layout/RootLayout"
->
-  <div>
-    navbar
-  </div>
-  <div>
-    content
-  </div>
-  <div>
-    footer
-  </div>
-</div>
-`;

package/src/Markdown/CodeSample/CodeSample.tsx

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

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

package/src/Markdown/CodeSample/styled.ts

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

@@ -1,40 +0,0 @@
-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/Navbar/Navbar.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Navbar } from './Navbar';
-import { NavbarMenu } from './NavbarMenu';
-
-import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
-
-export default {
-  title: 'Components/Navbar',
-  component: Navbar,
-} as ComponentMeta<typeof Navbar>;
-
-const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args}>Click</Navbar>;
-
-export const Main = Template.bind({});
-Main.args = {
-  logo: (
-    <NavbarLogo
-      logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
-    />
-  ),
-  menu: (
-    <NavbarMenu
-      menuItems={[
-        { type: 'link', link: 'https://google.com', label: 'Google' },
-        { type: 'link', link: '/test/', label: 'Test' },
-      ]}
-    />
-  ),
-  search: <span> search </span>,
-};

package/src/NavbarLogo/NavbarLogo.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
-
-export default {
-  title: 'Components/NavbarLogo',
-  component: NavbarLogo,
-} as ComponentMeta<typeof NavbarLogo>;
-
-const Template: ComponentStory<typeof NavbarLogo> = (args) => <NavbarLogo {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  logo: {
-    image: 'https://redocly.github.io/redoc/petstore-logo.png',
-    link: 'http://redocly.com/',
-    altText: 'Pet Store',
-  },
-};

package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { NavbarLogo } from '@theme/NavbarLogo';
-
-describe('NavbarLogo', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          image: 'https://test.com/logo.png',
-          altText: 'Navbar Logo',
-          link: 'https://test.com/',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders without link', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          image: 'https://test.com/logo.png',
-          altText: 'Navbar Logo',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders nothing, if no image provided', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          altText: 'Navbar Logo',
-          link: 'https://test.com/',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-});

package/src/NavbarLogo/__tests__/__snapshots__/NavbarLogo.test.tsx.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavbarLogo renders 1`] = `
-.c0 {
-  max-width: var(--logo-max-width);
-  max-height: var(--logo-max-height);
-  height: var(--logo-height);
-  margin: var(--logo-margin);
-}
-
-<a
-  href="https://test.com/"
-  to="https://test.com/"
->
-  <img
-    alt="Navbar Logo"
-    class="c0"
-    data-component-name="NavbarLogo/NavbarLogo"
-    src="https://test.com/logo.png"
-  />
-</a>
-`;
-
-exports[`NavbarLogo renders without link 1`] = `
-.c0 {
-  max-width: var(--logo-max-width);
-  max-height: var(--logo-max-height);
-  height: var(--logo-height);
-  margin: var(--logo-margin);
-}
-
-<img
-  alt="Navbar Logo"
-  class="c0"
-  data-component-name="NavbarLogo/NavbarLogo"
-  src="https://test.com/logo.png"
-/>
-`;

package/src/OperationBadge/OperationBadge.stories.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { OperationBadge } from '@theme/OperationBadge';
-
-export default {
-  title: 'Components/OperationBadge',
-  component: OperationBadge,
-  argTypes: {},
-} as ComponentMeta<typeof OperationBadge>;
-
-const Template: ComponentStory<typeof OperationBadge> = (args) => (
-  <OperationBadge {...args}>Default</OperationBadge>
-);
-
-export const Default = Template.bind({});
-Default.args = {};
-
-const TemplateAll: ComponentStory<typeof OperationBadge> = () => (
-  <>
-    <OperationBadge type="get">get</OperationBadge>
-    <OperationBadge type="post">post</OperationBadge>
-    <OperationBadge type="put">put</OperationBadge>
-    <OperationBadge type="delete">delete</OperationBadge>
-    <OperationBadge type="options">options</OperationBadge>
-    <OperationBadge type="patch">patch</OperationBadge>
-    <OperationBadge type="basic">basic</OperationBadge>
-    <OperationBadge type="link">link</OperationBadge>
-    <OperationBadge type="head">head</OperationBadge>
-    <OperationBadge type="hook">hook</OperationBadge>
-  </>
-);
-
-export const All = TemplateAll.bind({});
-All.args = {};

package/src/OperationBadge/__tests__/OperationBadge.test.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { OperationBadge } from '@theme/OperationBadge';
-
-describe('OperationBadge', () => {
-  it('renders basic', () => {
-    const { container } = render(<OperationBadge type={'basic'}>basic</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders get', () => {
-    const { container } = render(<OperationBadge type={'get'}>get</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders post', () => {
-    const { container } = render(<OperationBadge type={'post'}>post</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders put', () => {
-    const { container } = render(<OperationBadge type={'put'}>put</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders delete', () => {
-    const { container } = render(<OperationBadge type={'delete'}>delete</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders options', () => {
-    const { container } = render(<OperationBadge type={'options'}>options</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders patch', () => {
-    const { container } = render(<OperationBadge type={'patch'}>patch</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders link', () => {
-    const { container } = render(<OperationBadge type={'link'}>link</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders head', () => {
-    const { container } = render(<OperationBadge type={'head'}>head</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders hook', () => {
-    const { container } = render(<OperationBadge type={'hook'}>hook</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});