@stoplight/ui-kit 3.0.0-beta.9 → 3.0.1

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

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

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

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

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

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

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

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

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

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

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