@stoplight/ui-kit 3.0.2 → 3.0.3

package/src/CodeViewer/utils/__tests__/parseCode.spec.ts

@@ -1,87 +0,0 @@
-import * as refractor from 'refractor/core';
-
-import { parseCode } from '../parseCode';
-
-jest.mock('refractor/core');
-
-describe('parseCode util', () => {
-  afterEach(() => {
-    (refractor.highlight as jest.Mock).mockReset();
-  });
-
-  it('produces basic AST of if language is falsy', () => {
-    expect(parseCode('foo\nbar')).toEqual([
-      {
-        children: [
-          {
-            type: 'text',
-            value: 'foo\n',
-          },
-        ],
-        properties: {},
-        tagName: 'span',
-        type: 'element',
-      },
-      {
-        children: [
-          {
-            type: 'text',
-            value: 'bar',
-          },
-        ],
-        properties: {},
-        tagName: 'span',
-        type: 'element',
-      },
-    ]);
-  });
-
-  it('produces basic AST even when both code and language are falsy', () => {
-    expect(parseCode('')).toEqual([
-      {
-        children: [
-          {
-            type: 'text',
-            value: '',
-          },
-        ],
-        properties: {},
-        tagName: 'span',
-        type: 'element',
-      },
-    ]);
-  });
-
-  it('calls refractor.highlight and returns its result', () => {
-    const code = 'foo()';
-    const language = 'javscript';
-    const result = { type: 'element', tagName: 'span', children: [], properties: {} };
-    (refractor.highlight as jest.Mock).mockReturnValue(result);
-
-    expect(parseCode(code, language)).toBe(result);
-    expect(refractor.highlight).toHaveBeenCalledWith(code, language);
-  });
-
-  it('fall backs to plain text parsing if refractor highlighting fails', () => {
-    const code = 'foo()';
-    const language = 'javscript';
-    (refractor.highlight as jest.Mock).mockImplementation(() => {
-      throw new Error();
-    });
-
-    expect(parseCode(code, language)).toEqual([
-      {
-        children: [
-          {
-            type: 'text',
-            value: code,
-          },
-        ],
-        properties: {},
-        tagName: 'span',
-        type: 'element',
-      },
-    ]);
-    expect(refractor.highlight).toHaveBeenCalledWith(code, language);
-  });
-});

package/src/CodeViewer/utils/astToReact.ts

@@ -1,25 +0,0 @@
-import { createElement, ReactNode } from 'react';
-import { RefractorNode } from 'refractor/core';
-
-// based on https://github.com/rexxars/react-lowlight/blob/master/src/mapChildren.js
-function mapChild(child: RefractorNode, i: number, depth: number): ReactNode {
-  if ('tagName' in child) {
-    return createElement(
-      child.tagName,
-      {
-        key: `cv-${depth}-${i}`,
-        ...child.properties,
-        className: child.properties && (child.properties.className || []).join(' '),
-      },
-      child.children && child.children.map(astToReact(depth + 1)),
-    );
-  }
-
-  return child.value;
-}
-
-export function astToReact(depth: number = 0) {
-  return function mapChildrenWithDepth(child: RefractorNode, i: number) {
-    return mapChild(child, i, depth);
-  };
-}

package/src/CodeViewer/utils/lineNumberify.ts

@@ -1,120 +0,0 @@
-// based on https://github.com/FormidableLabs/prism-react-renderer
-import { AST, RefractorNode } from 'refractor/core';
-
-const newLineRegex = /\n/g;
-function getNewLines(str: string) {
-  return str.match(newLineRegex);
-}
-
-function createLineElement({
-  children,
-  lineNumber,
-  className,
-}: {
-  children: RefractorNode[];
-  lineNumber?: number;
-  className?: string[];
-}): AST.Element {
-  return {
-    type: 'element',
-    tagName: 'span',
-    properties: {
-      className: lineNumber === void 0 ? className : ['line-number'],
-      ...(lineNumber !== void 0 && { 'data-node-index': lineNumber }),
-    },
-    children,
-  };
-}
-
-function flattenCodeTree(tree: RefractorNode[], className: string[] = []): AST.Element[] {
-  const newTree: AST.Element[] = [];
-  for (const node of tree) {
-    if (node.type === 'text') {
-      newTree.push(
-        createLineElement({
-          children: [node],
-          className,
-        }),
-      );
-    } else if (node.children && node.properties.className !== void 0) {
-      const classNames = className.concat(node.properties.className);
-      newTree.push(...flattenCodeTree(node.children, classNames));
-    }
-  }
-
-  return newTree;
-}
-
-export function lineNumberify(codeTree: RefractorNode[], initialLineNumber: number): RefractorNode[] {
-  const tree = flattenCodeTree(codeTree);
-  const newTree = [];
-  let lastLineBreakIndex = -1;
-  let index = 0;
-
-  while (index < tree.length) {
-    const node = tree[index];
-    const value = (node.children![0] as AST.Text).value!;
-    const newLines = getNewLines(value);
-
-    if (newLines) {
-      const splitValue = value.split('\n');
-      splitValue.forEach((text, i) => {
-        const lineNumber = initialLineNumber + newTree.length + 1;
-        const newChild: AST.Text = { type: 'text', value: `${text}\n` };
-
-        if (i === 0) {
-          const children = tree.slice(lastLineBreakIndex + 1, index).concat(
-            createLineElement({
-              children: [newChild],
-              className: node.properties!.className,
-            }),
-          );
-          newTree.push(createLineElement({ children, lineNumber }));
-        } else if (i === splitValue.length - 1) {
-          const stringChild = tree[index + 1] && tree[index + 1].children && tree[index + 1].children![0];
-          if (stringChild) {
-            const lastLineInPreviousSpan: AST.Text = { type: 'text', value: `${text}` };
-            const newElem = createLineElement({
-              children: [lastLineInPreviousSpan],
-              className: node.properties!.className,
-            });
-            tree.splice(index + 1, 0, newElem);
-          } else {
-            newTree.push(
-              createLineElement({
-                children: [newChild],
-                lineNumber,
-                className: node.properties!.className,
-              }),
-            );
-          }
-        } else {
-          newTree.push(
-            createLineElement({
-              children: [newChild],
-              lineNumber,
-              className: node.properties!.className,
-            }),
-          );
-        }
-      });
-
-      lastLineBreakIndex = index;
-    }
-    index++;
-  }
-
-  if (lastLineBreakIndex !== tree.length - 1) {
-    const children = tree.slice(lastLineBreakIndex + 1, tree.length);
-    if (children && children.length) {
-      newTree.push(
-        createLineElement({
-          children,
-          lineNumber: initialLineNumber + newTree.length + 1,
-        }),
-      );
-    }
-  }
-
-  return newTree;
-}

package/src/CodeViewer/utils/parseCode.ts

@@ -1,58 +0,0 @@
-import * as refractor from 'refractor/core';
-
-refractor.register(require('refractor/lang/bash'));
-refractor.register(require('refractor/lang/c'));
-refractor.register(require('refractor/lang/csharp'));
-refractor.register(require('refractor/lang/diff'));
-refractor.register(require('refractor/lang/git'));
-refractor.register(require('refractor/lang/go'));
-refractor.register(require('refractor/lang/graphql'));
-refractor.register(require('refractor/lang/http'));
-refractor.register(require('refractor/lang/java'));
-refractor.register(require('refractor/lang/javascript'));
-refractor.register(require('refractor/lang/json'));
-refractor.register(require('refractor/lang/jsx'));
-refractor.register(require('refractor/lang/markdown'));
-refractor.register(require('refractor/lang/markup'));
-refractor.register(require('refractor/lang/markup-templating'));
-refractor.register(require('refractor/lang/objectivec'));
-refractor.register(require('refractor/lang/ocaml'));
-refractor.register(require('refractor/lang/php'));
-refractor.register(require('refractor/lang/powershell'));
-refractor.register(require('refractor/lang/protobuf'));
-refractor.register(require('refractor/lang/python'));
-refractor.register(require('refractor/lang/ruby'));
-refractor.register(require('refractor/lang/sql'));
-refractor.register(require('refractor/lang/swift'));
-refractor.register(require('refractor/lang/typescript'));
-refractor.register(require('refractor/lang/yaml'));
-
-function parsePlainText(code: string): refractor.RefractorNode[] {
-  return code.split('\n').map((value, i, arr) => ({
-    type: 'element',
-    tagName: 'span',
-    properties: {},
-    children: [
-      {
-        type: 'text',
-        value: arr.length - 1 === i ? value : `${value}\n`,
-      },
-    ],
-  }));
-}
-
-function safeParse(code: string, language?: string): refractor.RefractorNode[] {
-  if (language) {
-    try {
-      return refractor.highlight(code, language);
-    } catch (ex) {
-      // let's fallback to plain text
-    }
-  }
-
-  return parsePlainText(code);
-}
-
-export function parseCode(code: string, language?: string): refractor.RefractorNode[] {
-  return safeParse(code, language);
-}

package/src/Dropdown/Dropdown.tsx

@@ -1,80 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import { Menu, MenuItem } from '..';
-import { FixedSizeList } from '../ScrollList';
-import { ISelectProps, ItemListRenderer, ItemRenderer, Select } from '../Select';
-
-export interface IDropdown extends Omit<ISelectProps<string>, 'itemRenderer'> {
-  baseComponent: new (props: ISelectProps<string>) => Select<string>;
-  itemRenderer?: ISelectProps<string>['itemRenderer'];
-  itemSize?: number;
-  maxRows?: number;
-}
-
-export const Dropdown: React.FunctionComponent<IDropdown> = ({
-  children,
-  baseComponent,
-  items,
-  maxRows = 10,
-  itemSize = 30,
-  activeItem,
-  className,
-  popoverProps,
-  ...props
-}) => {
-  const itemListRenderer = React.useCallback<ItemListRenderer<string>>(
-    ({ filteredItems, renderItem }) => {
-      if (filteredItems.length === 0) {
-        return <span className="inline-block px-5 py-3">No results found</span>;
-      }
-
-      return (
-        <Menu className="Dropdown__select">
-          <FixedSizeList
-            className={className}
-            maxRows={maxRows}
-            itemSize={itemSize}
-            itemCount={filteredItems.length}
-            itemData={{ filteredItems, renderItem }}
-          >
-            {Item}
-          </FixedSizeList>
-        </Menu>
-      );
-    },
-    [className, maxRows, itemSize],
-  );
-
-  return React.createElement(
-    baseComponent as React.ComponentClass<ISelectProps<string>>,
-    {
-      filterable: false,
-      items,
-      itemRenderer,
-      itemListRenderer,
-      popoverProps: {
-        ...popoverProps,
-        portalClassName: cn('Dropdown__popover', popoverProps ? popoverProps.portalClassName : ''),
-      },
-      ...props,
-    },
-    children,
-  );
-};
-Dropdown.displayName = 'Dropdown';
-
-const itemRenderer: ItemRenderer<string> = (value, { handleClick, modifiers }) => (
-  <MenuItem active={modifiers.active} key={value} onClick={handleClick} text={value} />
-);
-
-const Item = (props: any) => {
-  const { data, index, style } = props;
-  const { filteredItems, renderItem } = data;
-
-  return (
-    <div key={index} style={style}>
-      {renderItem(filteredItems[index])}
-    </div>
-  );
-};

package/src/FAIcon/index.tsx

@@ -1,54 +0,0 @@
-import { IconLookup, IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
-import cn from 'classnames';
-import * as React from 'react';
-
-export type FAIconName = IconName;
-export type FAIconTuple = [IconPrefix, FAIconName];
-export type FAIconProp = FAIconName | FAIconTuple | IconLookup;
-
-export interface IIcon {
-  icon: FAIconProp;
-  className?: string;
-  size?: 'xs' | 'sm' | 'lg' | '2x' | '3x' | '5x' | '7x' | '10x';
-  style?: any;
-}
-
-export const FAIcon = ({ icon, className, size, style }: IIcon) => {
-  let prefix: IconPrefix = 'fas';
-  let name: FAIconName;
-
-  if (isIconName(icon)) {
-    name = icon;
-  } else if (isIconTuple(icon)) {
-    prefix = icon[0];
-    name = icon[1];
-  } else if (isIconLookup(icon)) {
-    prefix = icon.prefix || prefix;
-    name = icon.iconName;
-  } else {
-    // eslint-disable-next-line no-console
-    console.warn('Invalid icon prop provided to Icon component', icon);
-    name = 'exclamation';
-  }
-
-  return (
-    <i
-      className={cn(className, 'Icon', prefix, `fa-${name}`, {
-        [`fa-${size}`]: size,
-      })}
-      style={style}
-    />
-  );
-};
-
-function isIconName(arg: any): arg is FAIconName {
-  return typeof arg === 'string';
-}
-
-function isIconTuple(arg: any): arg is FAIconTuple {
-  return Array.isArray(arg);
-}
-
-function isIconLookup(arg: any): arg is IconLookup {
-  return arg && typeof arg === 'object' && arg.prefix && arg.iconName;
-}

package/src/FormButton/index.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-// TODO: should probably use ajv and json schema
-import * as yup from 'yup';
-
-import { useValidateSchema } from '../_hooks/useValidateSchema';
-import { Button, IButtonProps } from '../index';
-
-/**
- * FORM BUTTON
- * button that is disabled if the schema doesn't pass validation
- * TODO, add tooltip to explain why its disabled?
- */
-type OwnProps<T> = {
-  schema?: yup.Schema<T>;
-  data?: T;
-};
-
-type IFormButtonProps<T> = Omit<IButtonProps, 'type'> & OwnProps<T>;
-
-function FormButton<T>({ schema, data, loading, disabled, ...buttonProps }: IFormButtonProps<T>) {
-  const [{ errors, isValidating }] = useValidateSchema(schema, data);
-
-  return (
-    <Button disabled={errors.length > 0 || isValidating || loading || disabled} loading={loading} {...buttonProps} />
-  );
-}
-
-/**
- * EXPORTS
- */
-export { FormButton };

package/src/FormError/index.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-import { Callout } from '../';
-import { Dictionary } from '../types';
-
-/**
- * FORM ERROR
- */
-interface IFormError {
-  validationErrors: Array<{
-    property: string;
-    constraints: Dictionary<string>;
-  }>;
-
-  message?: string;
-}
-
-interface IFormErrorProps {
-  errors?: ReadonlyArray<IFormError>;
-}
-
-const FormError: React.FunctionComponent<IFormErrorProps> = ({ errors }) => {
-  if (!errors || !errors.length) return null;
-
-  return (
-    <Callout intent="danger" className="mb-5" icon={null}>
-      {errors.map((err, i) => {
-        if (err.validationErrors) {
-          return err.validationErrors.map(v => {
-            return Object.values(v.constraints).map(msg => {
-              return <div key={msg}>{msg}</div>;
-            });
-          });
-        } else {
-          return <div key={i}>{err.message}</div>;
-        }
-      })}
-    </Callout>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { FormError, IFormError, IFormErrorProps };

package/src/FormInput/index.tsx

@@ -1,135 +0,0 @@
-import {
-  HTMLInputProps,
-  Icon,
-  IInputGroupProps,
-  InputGroup,
-  ITooltipProps,
-  Position,
-  Spinner,
-  Tooltip,
-} from '@blueprintjs/core';
-import * as React from 'react';
-// TODO: should probably use ajv and json schema
-import * as yup from 'yup';
-
-import { useValidateSchema } from '../_hooks/useValidateSchema';
-import { Dictionary } from '../types';
-
-/**
- * FORM INPUT
- */
-interface IFormInputProps {
-  value: IInputGroupProps['value'];
-  onEnter?: Function;
-  schema?: yup.Schema<any>;
-  errors?: string[];
-  validationTooltipProps?: Partial<ITooltipProps>;
-}
-
-const FormInput: React.FunctionComponent<IInputGroupProps & IFormInputProps & HTMLInputProps> = ({
-  onEnter,
-  schema,
-  value,
-  errors,
-  validationTooltipProps,
-  ...props
-}) => {
-  function handleEnter(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'Enter' && onEnter) onEnter();
-  }
-
-  let size: Size = 'default';
-  if (props.large) {
-    size = 'large';
-  } else if (props.small) {
-    size = 'small';
-  }
-
-  return (
-    <InputGroup
-      value={value}
-      autoComplete="off"
-      onKeyPress={handleEnter}
-      rightElement={
-        <FormInputValidation
-          value={value}
-          schema={schema}
-          size={size}
-          errors={errors}
-          tooltipProps={validationTooltipProps}
-        />
-      }
-      {...props}
-    />
-  );
-};
-
-type Size = 'small' | 'default' | 'large';
-const iconHeight: Dictionary<string, Size> = {
-  small: '24px',
-  default: '30px',
-  large: '40px',
-};
-
-/**
- * FORM INPUT VALIDATIONS
- */
-
-interface IFormInputValidationProps {
-  value: IInputGroupProps['value'];
-  size: Size;
-  schema?: yup.Schema<any>;
-  errors?: string[];
-  tooltipProps?: Partial<ITooltipProps>;
-}
-
-const FormInputValidation: React.FunctionComponent<IFormInputValidationProps> = ({
-  value,
-  schema,
-  size,
-  errors = [],
-  tooltipProps,
-}) => {
-  const [{ errors: validationErrors, isValidating }] = useValidateSchema(schema, value, { abortEarly: false });
-  const errs = [...validationErrors, ...errors];
-
-  if (isValidating) {
-    return (
-      <Tooltip content="Validating..." position={Position.BOTTOM_RIGHT}>
-        <div tabIndex={-1} style={{ height: iconHeight[size], display: 'flex', alignItems: 'center' }} className="mr-2">
-          <Spinner size={size === 'small' ? 12 : Icon.SIZE_STANDARD} intent={errs.length ? 'danger' : 'primary'} />
-        </div>
-      </Tooltip>
-    );
-  }
-
-  if (!errs.length) return null;
-
-  return (
-    <Tooltip
-      content={
-        errs.length > 1 ? (
-          <ul>
-            {errs.map((error, index) => (
-              <li key={index}>• {error}</li>
-            ))}
-          </ul>
-        ) : (
-          errs[0]
-        )
-      }
-      position={Position.BOTTOM_RIGHT}
-      intent="danger"
-      {...tooltipProps}
-    >
-      <div tabIndex={-1} style={{ height: iconHeight[size], display: 'flex', alignItems: 'center' }} className="mr-2">
-        <Icon icon="issue" iconSize={size === 'small' ? 12 : Icon.SIZE_STANDARD} intent="danger" />
-      </div>
-    </Tooltip>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { FormInput, IFormInputProps, IFormInputValidationProps };

package/src/Icons/index.ts

@@ -1,2 +0,0 @@
-// does not contain the actual icon component thats in @blueprintjs/core
-export * from '@blueprintjs/icons';