@stoplight/ui-kit 3.0.2 → 3.0.3

package/src/ScrollContainer/__tests__/ScrollContainer.spec.tsx

@@ -1,87 +0,0 @@
-import 'jest-enzyme';
-
-import { shallow } from 'enzyme';
-import * as React from 'react';
-
-import { ScrollContainer } from '../';
-import { AutoSizer } from '../../AutoSizer';
-
-describe('ScrollContainer', () => {
-  it('renders with autosizer', () => {
-    const wrapper = shallow(
-      <ScrollContainer>
-        <ScrollContent />
-      </ScrollContainer>,
-    );
-
-    expect(wrapper.find(AutoSizer)).toExist();
-  });
-  it('renders without autosizer', () => {
-    const wrapper = shallow(
-      <ScrollContainer autosize={false}>
-        <ScrollContent />
-      </ScrollContainer>,
-    );
-
-    expect(wrapper.find(AutoSizer)).not.toExist();
-  });
-});
-
-const ScrollContent = () => {
-  return (
-    <div>
-      <div style={{ padding: 20 }}>
-        <h1>This is the primary heading and there should only be one of these per page</h1>
-        <p>
-          A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.
-        </p>
-        <a href="#ul-list" id="ul-list" />
-        <ul>
-          <li>This is a list item</li>
-          <li>So is this - there could be more</li>
-          <li>
-            Make sure to style list items to:
-            <ul>
-              <li>Not forgetting child list items</li>
-              <li>Not forgetting child list items</li>
-              <li>Not forgetting child list items</li>
-              <li>Not forgetting child list items</li>
-            </ul>
-          </li>
-          <li>A couple more</li>
-          <li>top level list items</li>
-        </ul>
-        <p>
-          Don't forget <strong>Ordered lists</strong>:
-        </p>
-        <ol>
-          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-          <li>
-            Aliquam tincidunt mauris eu risus.
-            <ol>
-              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-              <li>Aliquam tincidunt mauris eu risus.</li>
-            </ol>
-          </li>
-          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-          <li>Aliquam tincidunt mauris eu risus.</li>
-        </ol>
-        <a href="#sub-heading2" id="sub-heading2" />
-        <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
-        <p>
-          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-          tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-          semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-        </p>
-
-        <a href="#sub-heading3" id="sub-heading3" />
-        <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
-        <p>
-          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-          tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-          semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-        </p>
-      </div>
-    </div>
-  );
-};

package/src/ScrollContainer/index.tsx

@@ -1,163 +0,0 @@
-import cn from 'classnames';
-import { omit } from 'lodash';
-import * as React from 'react';
-import { Scrollbar, ScrollbarProps } from 'react-scrollbars-custom';
-import { ScrollbarThumbProps } from 'react-scrollbars-custom/dist/types/ScrollbarThumb';
-
-import { AutoSizer } from '../index';
-
-/**
- * SCROLL CONTAINER
- */
-export type ScrollbarRefInstance = HTMLDivElement | Scrollbar | null;
-export type ScrollbarRef = (instance: ScrollbarRefInstance) => void;
-
-interface IScrollContainer extends Omit<ScrollbarProps, 'ref'> {
-  shadows?: boolean;
-  autosize?: boolean;
-}
-
-const ScrollContainer = React.forwardRef<ScrollbarRefInstance, IScrollContainer>(
-  ({ id, children, shadows = true, autosize = true, scrollbarWidth = 6, ...props }, scrollbarRef) => {
-    const scrollbar = React.useRef<any>(null);
-    const scrollbarCallback = React.useCallback<ScrollbarRef>(
-      ref => {
-        scrollbar.current = ref;
-        if (typeof scrollbarRef === 'function') {
-          scrollbarRef(ref);
-        }
-      },
-      [scrollbarRef],
-    );
-
-    const showTracks = React.useCallback(() => {
-      if (!scrollbar.current) return;
-
-      scrollbar.current.trackXElement.style.opacity = 1;
-      scrollbar.current.trackYElement.style.opacity = 1;
-      scrollbar.current.trackXElement.style.transition = 'opacity 0s';
-      scrollbar.current.trackYElement.style.transition = 'opacity 0s';
-    }, [scrollbar]);
-
-    const hideTracks = React.useCallback(() => {
-      if (
-        !scrollbar.current ||
-        scrollbar.current.trackXElement.classList.contains('dragging') ||
-        scrollbar.current.trackYElement.classList.contains('dragging')
-      ) {
-        return;
-      }
-
-      scrollbar.current.trackXElement.style.opacity = 0;
-      scrollbar.current.trackYElement.style.opacity = 0;
-      scrollbar.current.trackXElement.style.transition = 'opacity 0.8s';
-      scrollbar.current.trackYElement.style.transition = 'opacity 0.8s';
-    }, [scrollbar]);
-
-    const updateShadows = React.useCallback(
-      (scrollValues: any) => {
-        if (!scrollbar.current || !shadows) return;
-
-        const { scrollTop, scrollHeight, clientHeight } = scrollValues;
-        const shadowTopOpacity = (1 / 20) * scrollTop;
-        const bottomScrollTop = scrollHeight - clientHeight;
-        const shadowBottomOpacity = (1 / 20) * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop));
-        const darkMode = window.document.getElementsByClassName('bp3-dark').length > 0;
-        scrollbar.current.wrapperElement.style.boxShadow = `rgba(${
-          darkMode ? `21, 21, 21` : `215, 215, 215`
-        }, ${shadowTopOpacity}) 0px 7px 8px -7px inset, rgba(${
-          darkMode ? `21, 21, 21` : `215, 215, 215`
-        }, ${shadowBottomOpacity}) 0px -7px 8px -7px inset`;
-      },
-      [scrollbar, shadows],
-    );
-
-    const thumbRenderer = React.useCallback(
-      (props: Pick<ScrollbarThumbProps, Exclude<keyof ScrollbarThumbProps, 'axis'>>) => {
-        const { elementRef, style, className } = props;
-        const styles = omit(style, ['background', 'borderRadius']);
-        return (
-          <div
-            className={cn(
-              className,
-              'bg-darken-4 hover:bg-darken-6 active:bg-darken-7 dark:bg-lighten-4 dark-hover:bg-lighten-5 dark-active:bg-lighten-6',
-            )}
-            style={styles}
-            ref={elementRef}
-          />
-        );
-      },
-      [],
-    );
-
-    const ScrollElem = (
-      <Scrollbar
-        {...props}
-        wrapperProps={{
-          className: 'relative',
-          style: { position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, overflow: 'hidden' },
-        }}
-        trackYProps={{
-          style: {
-            opacity: 0,
-            cursor: 'pointer',
-            background: 'inherit',
-            width: scrollbarWidth,
-            marginRight: 0,
-            borderRadius: 0,
-            top: 0,
-            bottom: 0,
-            height: '100%',
-          },
-        }}
-        trackXProps={{
-          style: {
-            opacity: 0,
-            cursor: 'pointer',
-            background: 'inherit',
-            height: scrollbarWidth,
-            marginBottom: 0,
-            borderRadius: 0,
-            left: 0,
-            right: 0,
-            width: '100%',
-          },
-        }}
-        thumbXProps={{
-          renderer: thumbRenderer,
-        }}
-        thumbYProps={{
-          renderer: thumbRenderer,
-        }}
-        ref={scrollbarCallback}
-        onUpdate={updateShadows}
-        scrollDetectionThreshold={500}
-        onMouseOver={showTracks}
-        onMouseOut={hideTracks}
-      >
-        {children}
-      </Scrollbar>
-    );
-
-    if (autosize) {
-      return (
-        <AutoSizer className="relative">
-          {({ height, width }) => (
-            <div style={{ height: height - 1, width: width - 1 }} className="overflow-hidden">
-              {ScrollElem}
-            </div>
-          )}
-        </AutoSizer>
-      );
-    }
-
-    return ScrollElem;
-  },
-);
-
-ScrollContainer.displayName = 'ScrollContainer';
-
-/**
- * EXPORTS
- */
-export { IScrollContainer, ScrollContainer };

package/src/ScrollList/index.tsx

@@ -1,132 +0,0 @@
-import { noop } from 'lodash';
-import * as React from 'react';
-import * as ReactWindow from 'react-window';
-
-import { AutoSizer } from '../AutoSizer';
-import { ScrollContainer } from '../ScrollContainer';
-
-/**
- * HELPERS
- */
-
-export const CustomScrollContainer = React.forwardRef<
-  HTMLDivElement,
-  IFixedSizeListProps & { listHeight: number; scrollbarWidth?: number }
->(({ onScroll = noop, children, className, style, scrollbarWidth = 8 }, ref) => {
-  return (
-    <ScrollContainer
-      ref={ref}
-      // @ts-ignore typings on onScroll are not right?
-      onScroll={scrollValues => onScroll({ currentTarget: scrollValues })}
-      autosize={false}
-      scrollbarWidth={scrollbarWidth}
-      className={className}
-      style={style}
-    >
-      {children}
-    </ScrollContainer>
-  );
-});
-
-/**
- * FIXED SIZE LIST
- */
-interface IFixedSizeListProps extends Omit<ReactWindow.FixedSizeListProps, 'height' | 'width'> {
-  className?: string;
-  maxRows?: number;
-  autoSize?: boolean;
-  instanceRef?: React.Ref<ReactWindow.FixedSizeList>;
-}
-
-const FixedSizeList: React.FunctionComponent<IFixedSizeListProps> = React.forwardRef<
-  ReactWindow.FixedSizeList,
-  IFixedSizeListProps
->(function FixedSizeList(props, ref) {
-  let { className, children, itemSize, itemCount, instanceRef, maxRows, style, autoSize, ...rest } = props;
-  if (isNaN(itemCount)) {
-    itemCount = 0;
-  }
-
-  const listHeight = Math.min(itemCount, maxRows || Infinity) * itemSize;
-
-  const renderList = ({ height, width }: { height?: number; width?: number } = {}) => {
-    return (
-      <ReactWindow.FixedSizeList
-        {...rest}
-        ref={instanceRef}
-        itemSize={itemSize}
-        itemCount={itemCount}
-        height={(height ? Math.min(height, listHeight) : listHeight) || 0}
-        width={width || '100%'}
-        // className gets passed to ScrollList-Content
-        className={className}
-        // style gets passed to SrollList-Scrollbars
-        style={style}
-        outerRef={ref}
-        outerElementType={CustomScrollContainer}
-      >
-        {children}
-      </ReactWindow.FixedSizeList>
-    );
-  };
-
-  if (autoSize) {
-    return <AutoSizer>{renderList}</AutoSizer>;
-  }
-
-  return renderList();
-});
-
-FixedSizeList.displayName = 'FixedSizeList';
-
-/**
- * VARIABLE SIZE LIST
- */
-interface IVariableSizeListProps extends Omit<ReactWindow.VariableSizeListProps, 'height' | 'width'> {
-  className?: string;
-  instanceRef?: React.Ref<ReactWindow.VariableSizeList>;
-}
-
-const VariableSizeList: React.FunctionComponent<IVariableSizeListProps> = React.forwardRef<
-  ReactWindow.VariableSizeList,
-  IVariableSizeListProps
->(function VariableSizeList(props, ref) {
-  let { children, instanceRef, itemCount, ...rest } = props;
-
-  if (isNaN(itemCount)) {
-    itemCount = 0;
-  }
-
-  return (
-    <AutoSizer>
-      {({ height, width }) => (
-        <ReactWindow.VariableSizeList
-          {...rest}
-          ref={instanceRef}
-          height={height}
-          width={width}
-          itemCount={itemCount}
-          outerRef={ref}
-          outerElementType={CustomScrollContainer}
-        >
-          {children}
-        </ReactWindow.VariableSizeList>
-      )}
-    </AutoSizer>
-  );
-});
-
-VariableSizeList.displayName = 'VariableSizeList';
-
-/**
- * EXPORTS
- */
-export {
-  areEqual,
-  shouldComponentUpdate,
-  ListItemKeySelector,
-  FixedSizeList as IFixedSizeList,
-  VariableSizeList as IVariableSizeList,
-} from 'react-window';
-
-export { IFixedSizeListProps, FixedSizeList, IVariableSizeListProps, VariableSizeList };

package/src/SecretInput/index.tsx

@@ -1,38 +0,0 @@
-import { Button, HTMLInputProps, IInputGroupProps, InputGroup, Tooltip } from '@blueprintjs/core';
-import * as React from 'react';
-
-type SecretInputProps = {
-  selectOnFocus?: boolean;
-} & IInputGroupProps &
-  HTMLInputProps;
-
-export const SecretInput = ({ selectOnFocus = false, ...props }: SecretInputProps) => {
-  const [visible, setVisible] = React.useState(false);
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-
-  const onRef = React.useCallback(el => (inputRef.current = el), []);
-
-  const onClick = React.useCallback(() => {
-    setVisible(!visible);
-    const input = inputRef.current;
-    if (input !== null) {
-      input.focus();
-      // Selection needs to happen after input has been focused
-      setTimeout(() => input.select());
-    }
-  }, [visible]);
-
-  return (
-    <InputGroup
-      inputRef={onRef}
-      rightElement={
-        <Tooltip content={`${visible ? 'Hide' : 'Reveal'}`} disabled={props.disabled}>
-          <Button icon={visible ? 'eye-open' : 'eye-off'} onClick={onClick} minimal={true} />
-        </Tooltip>
-      }
-      type={visible ? 'text' : 'password'}
-      onFocus={e => selectOnFocus && e.target.select()}
-      {...props}
-    />
-  );
-};

package/src/Select/index.ts

@@ -1 +0,0 @@
-export * from '@blueprintjs/select';

package/src/SimpleTabs/Tab.tsx

@@ -1,24 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-import { Tab, TabProps as ISimpleTabProps } from 'react-tabs';
-
-import { Classes } from '../classes';
-
-const SimpleTab: React.FunctionComponent<ISimpleTabProps> & { tabsRole: string } = props => {
-  const { children, ref, className, selectedClassName, disabledClassName, ...rest } = props;
-
-  return React.createElement(
-    Tab,
-    {
-      className: cn(Classes.SIMPLE_TAB, className),
-      selectedClassName: cn(selectedClassName, 'selected-tab'),
-      disabledClassName: cn(disabledClassName, 'disabled-tab'),
-      ...rest,
-    },
-    children,
-  );
-};
-
-SimpleTab.tabsRole = 'Tab';
-
-export { SimpleTab, ISimpleTabProps };

package/src/SimpleTabs/TabList.tsx

@@ -1,20 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-import { TabList as ReactTabList, TabListProps as ISimpleTabListProps } from 'react-tabs';
-
-import { Classes } from '../classes';
-
-/**
- * TAB LIST
- */
-const SimpleTabList: React.FunctionComponent<ISimpleTabListProps> & { tabsRole: string } = props => {
-  const { children, className, ...rest } = props;
-  return React.createElement(ReactTabList, { className: cn(Classes.SIMPLE_TAB_LIST, className), ...rest }, children);
-};
-
-SimpleTabList.tabsRole = 'TabList';
-
-/**
- * EXPORTS
- */
-export { SimpleTabList, ISimpleTabListProps };

package/src/SimpleTabs/TabPanel.tsx

@@ -1,29 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-import { TabPanel, TabPanelProps as ISimpleTabPanelProps } from 'react-tabs';
-
-import { Classes } from '../classes';
-
-/**
- * TAB PANEL
- */
-const SimpleTabPanel: React.FunctionComponent<ISimpleTabPanelProps> & { tabsRole: string } = props => {
-  const { children, ref, className, selectedClassName, ...rest } = props;
-
-  return React.createElement(
-    TabPanel,
-    {
-      className: cn(Classes.SIMPLE_TAB_PANEL, className),
-      selectedClassName: cn('block', selectedClassName),
-      ...rest,
-    },
-    children,
-  );
-};
-
-SimpleTabPanel.tabsRole = 'TabPanel';
-
-/**
- * EXPORTS
- */
-export { SimpleTabPanel, ISimpleTabPanelProps };

package/src/SimpleTabs/index.tsx

@@ -1,6 +0,0 @@
-import { Tabs as SimpleTabs, TabsProps as ISimpleTabsProps } from 'react-tabs';
-
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanel';
-export { SimpleTabs, ISimpleTabsProps };