@redocly/theme 0.0.1

package/LICENSE

@@ -0,0 +1 @@
+(c) Copyright 2022 Redocly Inc, all rights reserved.

package/lib/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@redocly/theme",
+  "version": "0.0.1",
+  "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",
+    "build-storybook": "build-storybook",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:copy": " cp -R src package.json .npmignore lib/",
+    "build": "npm run clean && npm run compile && npm run build:copy",
+    "build:watch": "npm run build && tsc --watch -p tsconfig.build.json & tsc-alias -w -p tsconfig.build.json",
+    "deploy": "npm publish lib",
+    "lint": "eslint . --ext .ts,.tsx --cache",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "prettier-base": "prettier \"**/*.{json,js,jsx,ts,tsx,yml,yaml,html,md}\"",
+    "prettier": "npm run prettier-base -- --write",
+    "prettier:check": "npm run prettier-base -- --check",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare": "husky install",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "peerDependencies": {
+    "prismjs": "^1.28.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.4.22",
+    "@storybook/core-common": "^6.4.22",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@storybook/node-logger": "^6.4.22",
+    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.26",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "chromatic": "^6.5.4",
+    "esbuild": "^0.14.38",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-storybook": "^0.5.11",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "jest-styled-components": "^7.0.8",
+    "lint-staged": "^12.4.1",
+    "prettier": "2.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.13.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
+    "ts-jest": "^27.1.4",
+    "tsc-alias": "^1.6.7",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write  --ignore-unknown"
+  }
+}

package/lib/src/Button/Button.tsx

@@ -0,0 +1,122 @@
+import styled, { css, FlattenSimpleInterpolation, keyframes, Keyframes } from 'styled-components';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
+
+export interface ButtonProps {
+  color?: ButtonColor;
+  disabled?: boolean;
+  blinking?: boolean;
+  fullWidth?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  extraClass?: string;
+}
+
+const getBlink = (): Keyframes => keyframes`
+  0% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+
+  50% {
+    background-color: var(--button-background-color);
+  }
+
+  100% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+`;
+
+const getSize = (size: ButtonSize = 'medium'): FlattenSimpleInterpolation => css`
+  font-size: var(--button-${size}-font-size);
+  padding: var(--button-${size}-padding);
+  min-width: var(--button-${size}-min-width);
+`;
+
+export const baseButtonStyles = css`
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  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);
+
+  &:hover {
+    box-shadow: var(--button-active-box-shadow);
+  }
+
+  &:active {
+    box-shadow: var(--button-active-box-shadow);
+  }
+`;
+
+export const Button = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
+  className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+}))<ButtonProps>`
+  text-decoration: none;
+  text-align: center;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${baseButtonStyles}
+
+  ${({ variant }) =>
+    variant === 'outlined'
+      ? css`
+          color: var(--button-background-color);
+          border: 2px solid var(--button-background-color);
+          background-color: transparent;
+          &:hover {
+            border: 2px solid var(--button-active-background-color);
+            background-color: transparent;
+          }
+
+          &:active {
+            border: 2px solid var(--button-outlined-active-border-color);
+          }
+        `
+      : css`
+          color: var(--button-color);
+          background-color: var(--button-background-color);
+          &:hover {
+            background-color: var(--button-hover-background-color);
+          }
+
+          &:active {
+            background-color: var(--button-active-background-color);
+          }
+        `};
+
+  ${({ size }) => getSize(size)}
+
+  & + & {
+    margin-left: 0.85em;
+  }
+
+  ${({ blinking }) =>
+    blinking &&
+    css`
+      pointer-events: none;
+      animation: ${getBlink()} 1.2s infinite;
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      &,
+      &:hover {
+        cursor: default;
+        color: #999999;
+        pointer-events: none;
+      }
+    `}
+`;

package/lib/src/Button/index.ts

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

package/lib/src/CodeBlock/CodeBlock.ts

@@ -0,0 +1,125 @@
+import styled from 'styled-components';
+
+export const CodeBlock = styled.div`
+  max-height: var(--code-block-max-height, 600px);
+  word-break: var(--code-block-word-break, initial);
+  /**
+  * Based on prism-dark.css
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    /* color: white;
+    background: none; */
+    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;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: var(--color-content-inverse);
+  }
+
+  .token.boolean {
+    color: var(--color-error-500);
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #fee39e;
+
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: #9efaa7;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #f5b83d;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #ffdbf4;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.deleted {
+    color: red;
+  }
+`;

package/lib/src/CodeBlock/index.ts

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

package/lib/src/CopyButton/CopyButton.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { Button } from '../Button';
+
+export interface CopyButtonProps {
+  text: string;
+  dataTestId?: string;
+}
+
+export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps): JSX.Element => {
+  const [title, setTitle] = useState('Copy');
+
+  async function write() {
+    await navigator.clipboard.writeText(text);
+
+    setTitle('Copied!');
+
+    setTimeout(() => setTitle('Copy'), 1500);
+  }
+
+  return (
+    <Button color="secondary" onClick={write} data-cy={dataTestId}>
+      {title}
+    </Button>
+  );
+};

package/lib/src/CopyButton/CopyButtonWrapper.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+
+import { SamplesControlButton } from '../SamplesPanelControls';
+import { Tooltip } from '../Tooltip';
+import { useControl } from '../hooks';
+import { ClipboardService } from '../utils';
+
+export interface CopyButtonWrapperProps {
+  data: unknown;
+  children: (props: { renderCopyButton: () => JSX.Element }) => JSX.Element;
+  dataTestId?: string;
+}
+
+function CopyButtonWrapperComponent({
+  data,
+  children,
+  dataTestId = 'copy-button',
+}: CopyButtonWrapperProps): JSX.Element {
+  const tooltip = useControl();
+
+  const showTooltip = (): void => {
+    tooltip.handleOpen();
+
+    setTimeout(() => {
+      tooltip.handleClose();
+    }, 1500);
+  };
+
+  const copy = (): void => {
+    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    ClipboardService.copyCustom(content);
+    showTooltip();
+  };
+
+  const renderCopyButton = (): JSX.Element => {
+    return (
+      <Tooltip
+        className="copy-button"
+        tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
+        open={tooltip.isOpened}
+      >
+        <SamplesControlButton onClick={copy} data-cy={dataTestId}>
+          Copy
+        </SamplesControlButton>
+      </Tooltip>
+    );
+  };
+
+  return children({ renderCopyButton });
+}
+
+export const CopyButtonWrapper = memo<CopyButtonWrapperProps>(CopyButtonWrapperComponent);

package/lib/src/CopyButton/index.ts

@@ -0,0 +1,2 @@
+export * from './CopyButtonWrapper';
+export * from './CopyButton';

package/lib/src/Headings/Headings.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { typography } from '../utils';
+
+export const H1 = styled.h1`
+  color: var(--color-content);
+  margin: 0 0 25px;
+
+  ${typography('h1', 'h')};
+`;
+
+export const H2 = styled.h2`
+  color: var(--color-content);
+  margin: 0 0 20px;
+
+  ${typography('h2', 'h')};
+`;
+
+export const H3 = styled.h3`
+  color: var(--color-content);
+
+  ${typography('h3', 'h')};
+`;

package/lib/src/Headings/index.ts

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

package/lib/src/JsonViewer/JsonViewer.tsx

@@ -0,0 +1,130 @@
+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';
+
+export interface JsonProps {
+  data: any;
+  className?: string;
+  jsonSampleExpandLevel: number;
+}
+
+function JsonComponent({ data, jsonSampleExpandLevel, className }: 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={className}
+          ref={node}
+          dangerouslySetInnerHTML={{
+            __html: jsonToHTML(data, jsonSampleExpandLevel),
+          }}
+        />
+      </JsonViewerWrap>
+    );
+  };
+
+  return (
+    <CopyButtonWrapper data-cy="copy-button" data={data}>
+      {renderInner}
+    </CopyButtonWrapper>
+  );
+}
+
+export const Json = memo<JsonProps>(JsonComponent);
+
+export const JsonViewer = styled(Json)<JsonProps>`
+  ${jsonStyles};
+`;
+
+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/lib/src/JsonViewer/index.ts

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

package/lib/src/JsonViewer/styled.ts

@@ -0,0 +1,103 @@
+import { css } from 'styled-components';
+
+export const jsonStyles = css`
+  .redoc-json code > .collapser {
+    display: none;
+    pointer-events: none;
+  }
+
+  contain: content;
+  overflow-x: auto;
+  padding: 10px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
+  white-space: var(--code-wrap, pre);
+
+  .callback-function {
+    color: gray;
+  }
+
+  .collapser:after {
+    content: '-';
+    cursor: pointer;
+  }
+
+  .collapsed > .collapser:after {
+    content: '+';
+    cursor: pointer;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    margin-left: 2ch;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    background-color: transparent;
+    border: 0;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    top: 4px;
+    left: -1.5em;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    padding: 2px;
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 0 0 26px;
+  }
+
+  li {
+    position: relative;
+    display: block;
+  }
+
+  .hoverable {
+    display: inline-block;
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inherit;
+  }
+`;