@redocly/theme 0.1.1 → 0.1.4

package/index.d.ts

@@ -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,90 +1,14 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "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",
-    "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/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/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/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';