@redocly/theme 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -28,7 +28,6 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "prepare": "husky install",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "peerDependencies": {

package/LICENSE

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

package/lib/package.json

@@ -1,91 +0,0 @@
-{
-  "name": "@redocly/theme",
-  "version": "0.1.0",
-  "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

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

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

package/lib/src/CodeBlock/CodeBlock.ts

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

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

package/lib/src/CopyButton/CopyButton.tsx

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

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

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

package/lib/src/Headings/Headings.ts

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

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

package/lib/src/JsonViewer/JsonViewer.tsx

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

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