@redocly/theme 0.1.0 → 0.1.3

package/index.js

@@ -0,0 +1,14 @@
+export * from './Button';
+export * from './CopyButton';
+export * from './JsonViewer';
+export * from './Headings';
+export * from './SidebarLogo';
+export * from './CodeBlock';
+export * from './SamplesPanelControls';
+export * from './Tooltip';
+export * from './SourceCode';
+export * from './Panel';
+export * from './icons';
+export * from './hooks';
+export * from './utils';
+export * from './globalStyle';

package/mocks/Link.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Link(props: any): JSX.Element;

package/mocks/Link.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: use real typings here
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function Link(props) {
+    return _jsx("a", __assign({ href: props.to }, props));
+}

package/mocks/utils.d.ts

@@ -0,0 +1 @@
+export declare function withPathPrefix(link: string): string;

package/mocks/utils.js

@@ -0,0 +1,3 @@
+export function withPathPrefix(link) {
+    return link;
+}

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "index.js",
   "typings": "index.d.ts",
-  "files": [
-    "lib"
-  ],
   "scripts": {
     "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",
@@ -28,7 +25,6 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "prepare": "husky install",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "peerDependencies": {

package/src/Button/Button.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large', 'xlarge'],
+    },
+    color: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'default'],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args}>Click</Button>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  color: 'primary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  color: 'secondary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  color: 'primary',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'outlined',
+  size: 'small',
+  extraClass: 'test',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  color: 'secondary',
+  disabled: true,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'small',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  color: 'default',
+  disabled: false,
+  blinking: false,
+  fullWidth: false,
+  variant: 'contained',
+  size: 'large',
+};

package/src/Button/__tests__/Button.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Button } from '../Button';
+
+describe('Button', () => {
+  it('renders', () => {
+    const { container } = render(<Button>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders blinking', () => {
+    const { container } = render(<Button blinking>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with extra class', () => {
+    const { container } = render(<Button extraClass="quick-fox">Test</Button>);
+
+    expect(container.firstChild).toHaveClass('quick-fox');
+  });
+
+  it('renders disabled', () => {
+    const { container } = render(<Button disabled>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders full width', () => {
+    const { container } = render(<Button fullWidth>Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders outlined', () => {
+    const { container } = render(<Button variant="outlined">Test</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders blinking 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+  pointer-events: none;
+  -webkit-animation: hiqtTO 1.2s infinite;
+  animation: hiqtTO 1.2s infinite;
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders disabled 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+.c1,
+.c1:hover {
+  cursor: default;
+  color: #999999;
+  pointer-events: none;
+}
+
+<button
+  class="c0 c1 button-color-default"
+  disabled=""
+>
+  Test
+</button>
+`;
+
+exports[`Button renders full width 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: 100%;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  background-color: var(--button-hover-background-color);
+}
+
+.c1:active {
+  background-color: var(--button-active-background-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;
+
+exports[`Button renders outlined 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-medium-font-size);
+  padding: var(--button-medium-padding);
+  min-width: var(--button-medium-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c1:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<button
+  class="c0 c1 button-color-default"
+>
+  Test
+</button>
+`;

package/src/Button/index.ts

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

package/src/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CodeBlock } from '../CodeBlock';
+
+describe('CodeBlock', () => {
+  it('renders', () => {
+    const { container } = render(<CodeBlock>Test</CodeBlock>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeBlock renders 1`] = `
+.c0 {
+  max-height: var(--code-block-max-height,600px);
+  word-break: var(--code-block-word-break,initial);
+}
+
+.c0 code[class*='language-'],
+.c0 pre[class*='language-'] {
+  text-shadow: 0 -0.1em 0.2em black;
+  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;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.c0 pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+.c0 .token.comment,
+.c0 .token.prolog,
+.c0 .token.doctype,
+.c0 .token.cdata {
+  color: hsl(30,20%,50%);
+}
+
+.c0 .token.punctuation {
+  opacity: 1;
+}
+
+.c0 .namespace {
+  opacity: 0.7;
+}
+
+.c0 .token.property,
+.c0 .token.tag,
+.c0 .token.number,
+.c0 .token.constant,
+.c0 .token.symbol {
+  color: var(--color-content-inverse);
+}
+
+.c0 .token.boolean {
+  color: var(--color-error-500);
+}
+
+.c0 .token.selector,
+.c0 .token.attr-name,
+.c0 .token.string,
+.c0 .token.char,
+.c0 .token.builtin,
+.c0 .token.inserted {
+  color: #fee39e;
+}
+
+.c0 .token.selector + a,
+.c0 .token.attr-name + a,
+.c0 .token.string + a,
+.c0 .token.char + a,
+.c0 .token.builtin + a,
+.c0 .token.inserted + a,
+.c0 .token.selector + a:visited,
+.c0 .token.attr-name + a:visited,
+.c0 .token.string + a:visited,
+.c0 .token.char + a:visited,
+.c0 .token.builtin + a:visited,
+.c0 .token.inserted + a:visited {
+  color: #4ed2ba;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 .token.property.string {
+  color: #9efaa7;
+}
+
+.c0 .token.operator,
+.c0 .token.entity,
+.c0 .token.url,
+.c0 .token.variable {
+  color: #f5b83d;
+}
+
+.c0 .token.atrule,
+.c0 .token.attr-value,
+.c0 .token.keyword {
+  color: #ffdbf4;
+}
+
+.c0 .token.regex,
+.c0 .token.important {
+  color: #e90;
+}
+
+.c0 .token.important,
+.c0 .token.bold {
+  font-weight: bold;
+}
+
+.c0 .token.italic {
+  font-style: italic;
+}
+
+.c0 .token.entity {
+  cursor: help;
+}
+
+.c0 .token.deleted {
+  color: red;
+}
+
+@media print {
+  .c0 code[class*='language-'],
+  .c0 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<div
+  class="c0"
+>
+  Test
+</div>
+`;

package/src/CodeBlock/index.ts

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

package/src/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CopyButton } from './CopyButton';
+
+export default {
+  title: 'CopyButton',
+  component: CopyButton,
+} as ComponentMeta<typeof CopyButton>;
+
+const Template: ComponentStory<typeof CopyButton> = (args) => (
+  <CopyButton {...args}>Copy</CopyButton>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Something useful',
+};

package/src/CopyButton/__tests__/CopyButton.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { fireEvent, getByText, render } from '@testing-library/react';
+
+import { CopyButton } from '../CopyButton';
+
+const mockSetState = jest.fn();
+
+jest.mock('react', () => {
+  const original = jest.requireActual('react');
+  return {
+    ...original,
+    useState: (initial: any) => [initial, mockSetState],
+  };
+});
+
+describe('CopyButton', () => {
+  it('renders', () => {
+    const { container } = render(<CopyButton text="test copy" dataTestId="copy" />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('changes button text on click', () => {
+    Object.assign(navigator, {
+      clipboard: { writeText: jest.fn() },
+    });
+    const textToCopy = 'test copy';
+    const { container } = render(<CopyButton text={textToCopy} />);
+    const button = getByText(container, /Copy/);
+
+    fireEvent.click(button);
+
+    expect(navigator.clipboard.writeText).toBeCalledWith(textToCopy);
+  });
+});

package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+import { CopyButtonWrapper } from '../CopyButtonWrapper';
+
+describe('CopyButtonWrapper', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <CopyButtonWrapper data="Something" dataTestId="copy">
+        {({ renderCopyButton }) => <div>{renderCopyButton()}</div>}
+      </CopyButtonWrapper>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});