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

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

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

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

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

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

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

package/src/SimpleTabs/Tab.tsx

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

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

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

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