@stoplight/ui-kit 3.0.2 → 3.0.3

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

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

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

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

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

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

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

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

package/src/CodeViewer/components/InlineCodeViewer.tsx

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

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

@@ -1,118 +0,0 @@
-// 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>
-`;