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

package/src/CodeEditor/__tests__/Editor.spec.tsx

@@ -0,0 +1,30 @@
+import 'jest-enzyme';
+
+import { mount } from 'enzyme';
+import * as React from 'react';
+import ReactSimpleCodeEditor from 'react-simple-code-editor';
+
+import { CodeEditor } from '..';
+
+describe('Code Editor component', () => {
+  it('calls onChange on code change', () => {
+    const onChange = jest.fn();
+    const newCode = 'abcdef';
+
+    const wrapper = mount(<CodeEditor onChange={onChange} language="js" value="code" />);
+
+    wrapper.find(ReactSimpleCodeEditor).prop('onValueChange')(newCode);
+    expect(onChange).toHaveBeenCalledWith(newCode);
+    wrapper.unmount();
+  });
+
+  it('passes down current value to Editor', () => {
+    const newCode = 'foobar';
+    const wrapper = mount(<CodeEditor onChange={() => null} language="js" value="test" />);
+
+    wrapper.setProps({ value: newCode });
+
+    expect(wrapper.find(CodeEditor)).toHaveProp('value', newCode);
+    wrapper.unmount();
+  });
+});

package/src/CodeEditor/index.tsx

@@ -0,0 +1,69 @@
+import { Intent } from '@blueprintjs/core';
+import cn from 'classnames';
+import * as React from 'react';
+import ReactSimpleCodeEditor from 'react-simple-code-editor';
+
+import { Classes } from '../classes';
+import { highlightCode } from './utils/highlightCode';
+
+/**
+ * CODE EDITOR
+ */
+interface ICodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value: string;
+  onChange(code: string): any;
+  padding?: number | string;
+  language?: string;
+  autoFocus?: boolean;
+  showLineNumbers?: boolean;
+  intent?: Intent;
+}
+
+const CodeEditor = React.forwardRef<ReactSimpleCodeEditor, ICodeEditorProps>((props, ref) => {
+  const {
+    autoFocus,
+    language,
+    onChange,
+    value,
+    placeholder,
+    className,
+    padding,
+    style,
+    showLineNumbers,
+    intent,
+    ...rest
+  } = props;
+
+  // Highlight code on change
+  const highlight = React.useCallback((code: string) => highlightCode(code, language || '', showLineNumbers), [
+    language,
+    showLineNumbers,
+  ]);
+
+  const lineNumberCharacterCount = showLineNumbers ? String(Array.from(value.matchAll(/\n/g)).length + 1).length : 0;
+
+  return (
+    <ReactSimpleCodeEditor
+      {...rest}
+      // @ts-ignore FIXME type error
+      ref={ref}
+      className={cn(Classes.CODE_EDITOR, className, {
+        [`${Classes.CODE_EDITOR}--line-numbers ${Classes.CODE_EDITOR}--line-numbers--${lineNumberCharacterCount}`]: showLineNumbers,
+        [`${Classes.CODE_EDITOR}--${intent}`]: intent !== void 0,
+      })}
+      style={style}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      value={value}
+      onValueChange={onChange}
+      highlight={highlight}
+      padding={padding}
+    />
+  );
+});
+CodeEditor.displayName = 'CodeEditor';
+
+/**
+ * EXPORTS
+ */
+export { CodeEditor, ICodeEditorProps };

package/src/CodeEditor/utils/highlightCode.ts

@@ -0,0 +1,59 @@
+// eslint-disable-next-line simple-import-sort/sort
+import * as Prism from 'prismjs';
+
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-graphql';
+import 'prismjs/components/prism-http';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-ocaml';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-powershell';
+import 'prismjs/components/prism-protobuf';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-yaml';
+
+export const highlightCode = (code: string = '', language: string, showLineNumbers?: boolean) => {
+  const langDef = Prism.languages[language];
+  if (!code || !langDef) {
+    if (showLineNumbers) {
+      return `<span class="line-number"></span>${code}`;
+    }
+
+    return code;
+  }
+
+  try {
+    const result = Prism.highlight(code, langDef, language);
+
+    if (showLineNumbers) {
+      const splitOnNewLines = result.split('\n');
+      if (splitOnNewLines.length) {
+        return splitOnNewLines.map(line => `<span class="line-number"></span>${line}`).join('\n');
+      }
+
+      return `<span class="line-number"></span>${splitOnNewLines[0]}`;
+    }
+
+    return result;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error highlighting code:', error, code);
+    return code;
+  }
+};

package/src/CodeViewer/__tests__/Viewer.spec.tsx

@@ -0,0 +1,83 @@
+import 'jest-enzyme';
+
+import { mount, shallow } from 'enzyme';
+import * as React from 'react';
+
+import { CodeViewer } from '..';
+import { astToReact } from '../utils/astToReact';
+import { parseCode } from '../utils/parseCode';
+
+jest.mock('../utils/astToReact');
+jest.mock('../utils/parseCode');
+
+jest.mock('../components/BlockCodeViewer/ObservableSet', () => ({
+  ObservableSet: class extends Set {
+    public readonly addListener = jest.fn().mockImplementation((node, listener) => {
+      listener();
+      return jest.fn();
+    });
+  },
+}));
+
+describe('Code Viewer component', () => {
+  afterEach(() => {
+    (parseCode as jest.Mock).mockReset();
+    (astToReact as jest.Mock).mockReset();
+  });
+
+  it('renders code element with raw value for inline view', () => {
+    const code = '{}';
+    const language = 'json';
+
+    const wrapper = shallow(<CodeViewer language={language} value={code} inline />).dive();
+    expect(wrapper).toHaveText(code);
+    expect(wrapper).toHaveDisplayName('code');
+
+    expect(parseCode).not.toHaveBeenCalled();
+  });
+
+  it('renders pre element for block view', () => {
+    const code = '{}';
+    const language = 'json';
+
+    const wrapper = shallow(<CodeViewer language={language} value={code} />).dive();
+    expect(wrapper).toHaveDisplayName('pre');
+  });
+
+  it('renders code as is if parsing fails', () => {
+    const code = '{}';
+    const language = 'json';
+    (parseCode as jest.Mock).mockReturnValue(null);
+
+    const wrapper = mount(<CodeViewer language={language} value={code} />);
+    expect(wrapper).toHaveText(code);
+
+    expect(parseCode).toHaveBeenCalledWith(code, language);
+    wrapper.unmount();
+  });
+
+  it('renders parsed markup if possible', () => {
+    const code = 'function';
+    const language = 'javascript';
+    const ast = [
+      {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['token', 'function'],
+        },
+        value: 'function',
+      },
+    ];
+    const markup = <span className="token function">function</span>;
+
+    (parseCode as jest.Mock).mockReturnValue(ast);
+    (astToReact as jest.Mock).mockReturnValue(() => markup);
+
+    const wrapper = mount(<CodeViewer language={language} value={code} />);
+    expect(wrapper).toContainReact(markup);
+    expect(parseCode).toHaveBeenCalledWith(code, language);
+    expect(astToReact).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+});

package/src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx

@@ -0,0 +1,84 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import { Classes } from '../../../classes';
+import { useSlicedBlocks } from './hooks/useSlicedBlocks';
+import { ObservableSet } from './ObservableSet';
+import { SingleCodeBlock } from './SingleCodeBlock';
+
+export interface IBlockCodeViewerProps extends React.HTMLAttributes<HTMLPreElement> {
+  value: string;
+  language: string | undefined;
+  showLineNumbers: boolean;
+}
+
+const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language, value, showLineNumbers, ...rest }) => {
+  const nodeRef = React.useRef<HTMLPreElement | null>(null);
+  const maxLines = 100;
+  const [observer, setObserver] = React.useState<IntersectionObserver>();
+  const viewportSet = React.useRef(new ObservableSet());
+  const slicedBlocks = useSlicedBlocks(value ?? '', maxLines - 1);
+  const lineNumberCharacterCount = String(slicedBlocks.length * maxLines).length;
+
+  React.useEffect(() => {
+    const { current: viewport } = viewportSet;
+    if (nodeRef.current === null) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      entries => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+
+          viewport.add(entry.target);
+          const { previousElementSibling, nextElementSibling } = entry.target;
+
+          // highlight siblings to reduce flickering while scrolling using page up/down
+          if (previousElementSibling?.tagName === 'DIV') {
+            viewport.add(previousElementSibling);
+          }
+
+          if (nextElementSibling?.tagName === 'DIV') {
+            viewport.add(nextElementSibling);
+          }
+        }
+      },
+      {
+        root: null,
+        threshold: 0,
+      },
+    );
+
+    setObserver(observer);
+
+    return () => {
+      setObserver(void 0);
+      observer.disconnect();
+    };
+  }, [nodeRef]);
+
+  return (
+    <pre
+      ref={nodeRef}
+      className={cn(Classes.CODE_VIEWER, className, `language-${language || 'unknown'}`, {
+        [`${Classes.CODE_VIEWER}--line-numbers ${Classes.CODE_VIEWER}--line-numbers--${lineNumberCharacterCount}`]: showLineNumbers,
+      })}
+      {...rest}
+    >
+      {slicedBlocks?.map(({ id, value }, index, blocks) => (
+        <SingleCodeBlock
+          key={id}
+          value={value}
+          language={language}
+          showLineNumbers={showLineNumbers}
+          lineNumber={(index > 0 ? blocks[index - 1].lineCount : 0) + 1}
+          observer={observer}
+          viewport={viewportSet.current}
+        />
+      ))}
+    </pre>
+  );
+};
+
+export { BlockCodeViewer as default };

package/src/CodeViewer/components/BlockCodeViewer/ObservableSet.ts

@@ -0,0 +1,19 @@
+export class ObservableSet extends WeakSet<Element> {
+  private readonly listeners = new WeakMap<Element, Function>();
+
+  addListener(item: Element, cb: Function) {
+    this.listeners.set(item, cb);
+
+    return () => {
+      this.listeners.delete(item);
+    };
+  }
+
+  add(item: Element) {
+    if (super.has(item)) return this;
+
+    super.add(item);
+    this.listeners.get(item)?.();
+    return this;
+  }
+}

package/src/CodeViewer/components/BlockCodeViewer/SingleCodeBlock.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import type { RefractorNode } from 'refractor/core';
+
+import { astToReact } from '../../utils/astToReact';
+import { lineNumberify } from '../../utils/lineNumberify';
+import { parseCode } from '../../utils/parseCode';
+import type { ObservableSet } from './ObservableSet';
+
+interface IBlockProps {
+  value: string;
+  language: string | undefined;
+  showLineNumbers: boolean;
+  lineNumber: number;
+  observer: IntersectionObserver | undefined;
+  viewport: ObservableSet;
+}
+
+const WHITESPACE_REGEX = /^[\s\n]+$/;
+
+function isWhitespace(str: string) {
+  return WHITESPACE_REGEX.test(str);
+}
+
+function isTrailingWhiteLine(node: RefractorNode) {
+  if (node.type === 'text') {
+    return isWhitespace(node.value);
+  }
+
+  if ('children' in node && node.children.length === 1 && 'value' in node.children[0]) {
+    return isWhitespace(node.children[0].value);
+  }
+
+  return false;
+}
+
+export const SingleCodeBlock: React.FC<IBlockProps> = ({
+  value,
+  language,
+  showLineNumbers,
+  lineNumber,
+  observer,
+  viewport,
+}) => {
+  const [markup, setMarkup] = React.useState<React.ReactNode[]>();
+  const [isVisible, setIsVisible] = React.useState(false);
+  const nodeRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const { current: node } = nodeRef;
+
+    if (node === null || observer === void 0) {
+      return;
+    }
+
+    observer.observe(node);
+
+    const removeListener = viewport.addListener(node, () => {
+      setIsVisible(true);
+      observer.unobserve(node);
+    });
+
+    return () => {
+      observer.unobserve(node);
+      removeListener();
+    };
+  }, [viewport, observer, nodeRef]);
+
+  React.useEffect(() => {
+    if (isVisible) {
+      try {
+        const tree = parseCode(value, language);
+        const processedTree = showLineNumbers ? lineNumberify(tree, lineNumber - 1) : tree;
+
+        if (showLineNumbers && tree.length > 0 && isTrailingWhiteLine(tree[tree.length - 1])) {
+          // this is to get rid of trailing new lines
+          processedTree.pop();
+        }
+
+        setMarkup(processedTree.map(astToReact(0)));
+      } catch {
+        // parsing failed for some reason, let's display regular text
+      }
+    }
+  }, [isVisible, lineNumber, value, language, showLineNumbers]);
+
+  if (markup !== void 0) {
+    return <>{markup}</>;
+  }
+
+  return <div ref={nodeRef}>{value}</div>;
+};

package/src/CodeViewer/components/BlockCodeViewer/consts.ts

@@ -0,0 +1 @@
+export const SINGLE_LINE_SIZE = 24; // this has to be on par with an actual line of element as rendered in browser

package/src/CodeViewer/components/BlockCodeViewer/hooks/useSlicedBlocks.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+type SlicedBlock = {
+  id: string;
+  value: string;
+  lineCount: number;
+};
+
+function createSlicedBlock(): SlicedBlock {
+  return {
+    id: Math.random().toString(36),
+    value: '',
+    lineCount: 0,
+  };
+}
+
+export const useSlicedBlocks = (value: string, maxLines: number) => {
+  return React.useMemo<SlicedBlock[]>(() => {
+    const blocks: SlicedBlock[] = [createSlicedBlock()];
+
+    for (let i = 0, n = 0; i < value.length; i++) {
+      const char = value[i];
+      blocks[blocks.length - 1].value += char;
+
+      if (char === '\n') {
+        n++;
+
+        if (n % maxLines === 0 && i + 1 !== value.length) {
+          blocks[blocks.length - 1].lineCount = n;
+          blocks.push(createSlicedBlock());
+        }
+      }
+    }
+
+    return blocks;
+  }, [value, maxLines]);
+};

package/src/CodeViewer/components/BlockCodeViewer/index.tsx

@@ -0,0 +1,2 @@
+export type { IBlockCodeViewerProps } from './BlockCodeViewer';
+export { default as BlockCodeViewer } from './BlockCodeViewer';

package/src/CodeViewer/components/InlineCodeViewer.tsx

@@ -0,0 +1,16 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import { Classes } from '../../classes';
+
+export interface IInlineCodeViewerProps extends React.HTMLAttributes<HTMLElement> {
+  value: string;
+}
+
+export const InlineCodeViewer: React.FC<IInlineCodeViewerProps> = ({ className, value, ...rest }) => {
+  return (
+    <code className={cn(Classes.CODE_VIEWER, className, `${Classes.CODE_VIEWER}--inline`)} {...rest}>
+      {value}
+    </code>
+  );
+};

package/src/CodeViewer/index.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { BlockCodeViewer } from './components/BlockCodeViewer';
+import { InlineCodeViewer } from './components/InlineCodeViewer';
+
+const languageMaps: { [from: string]: string } = {
+  md: 'markdown',
+};
+
+/**
+ * CODE VIEWER
+ */
+interface ICodeViewerProps extends React.HTMLAttributes<HTMLElement> {
+  value: string;
+  language?: string;
+  showLineNumbers?: boolean;
+  inline?: boolean;
+}
+
+const CodeViewer: React.FunctionComponent<ICodeViewerProps> = ({
+  language,
+  value,
+  showLineNumbers = false,
+  inline = false,
+  ...rest
+}) => {
+  if (inline) {
+    return <InlineCodeViewer value={value} {...rest} />;
+  }
+
+  const lang = (language && languageMaps[language]) || language;
+  return <BlockCodeViewer showLineNumbers={showLineNumbers} language={lang} value={value} {...rest} />;
+};
+
+/**
+ * EXPORTS
+ */
+
+export { CodeViewer, ICodeViewerProps };

package/src/CodeViewer/utils/__tests__/__snapshots__/astToReact.spec.ts.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`astToReact util fixture clike 1`] = `
+<pre>
+  int 
+  <span
+    className="token function"
+    key="cv-0-1"
+  >
+    main
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-2"
+  >
+    (
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-3"
+  >
+    )
+  </span>
+   
+  <span
+    className="token punctuation"
+    key="cv-0-5"
+  >
+    {
+  </span>
+  
+  
+  <span
+    className="token comment"
+    key="cv-0-7"
+  >
+    // some dumb code
+  </span>
+  
+  
+  <span
+    className="token keyword"
+    key="cv-0-9"
+  >
+    return
+  </span>
+   
+  <span
+    className="token number"
+    key="cv-0-11"
+  >
+    0
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-12"
+  >
+    ;
+  </span>
+  
+
+  <span
+    className="token punctuation"
+    key="cv-0-14"
+  >
+    }
+  </span>
+</pre>
+`;
+
+exports[`astToReact util fixture javascript 1`] = `
+<pre>
+  <span
+    className="token keyword"
+    key="cv-0-0"
+  >
+    const
+  </span>
+   defaultValue 
+  <span
+    className="token operator"
+    key="cv-0-2"
+  >
+    =
+  </span>
+   stoplight
+  <span
+    className="token punctuation"
+    key="cv-0-4"
+  >
+    .
+  </span>
+  <span
+    className="token function"
+    key="cv-0-5"
+  >
+    io
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-6"
+  >
+    (
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-7"
+  >
+    )
+  </span>
+  <span
+    className="token punctuation"
+    key="cv-0-8"
+  >
+    ;
+  </span>
+</pre>
+`;