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

package/src/TableOfContents/index.tsx

@@ -0,0 +1,414 @@
+import { Button, Drawer } from '@blueprintjs/core';
+import cn from 'classnames';
+import { flatMap, range } from 'lodash';
+import * as React from 'react';
+
+import { FAIcon, FAIconProp } from '../FAIcon';
+import { ScrollContainer } from '../ScrollContainer';
+
+export type TableOfContentsItem = {
+  name: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  depth?: number;
+  isSelected?: boolean;
+  isActive?: boolean;
+  meta?: React.ReactNode;
+  footer?: React.ReactNode;
+  type?: 'divider' | 'group' | 'item';
+  icon?: FAIconProp;
+  activeIcon?: FAIconProp;
+  iconColor?: string;
+  iconPosition?: 'left' | 'right';
+  textIcon?: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  showSkeleton?: boolean;
+  startExpanded?: boolean;
+  action?: {
+    icon?: FAIconProp;
+    name?: string;
+    isActive?: boolean;
+    onClick: any;
+  };
+};
+
+export type SelectItem = {
+  name: React.ReactNode;
+  value: string;
+  label?: string;
+};
+
+export type ITableOfContentsLink = TableOfContentsItem & {
+  to?: string;
+  exact?: boolean;
+  isExternalLink?: boolean;
+};
+
+export type RowComponentProps<T extends TableOfContentsItem, E = {}> = {
+  item: T;
+  index: number;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+} & ({} extends E ? {} : { extra: E });
+
+// This is the call signature from `React.FunctionComponent`
+// Unfortunately `React.ComponentType` does not play well with generics due to `propTypes`.
+export type RowComponentType<T extends TableOfContentsItem, E = {}> = (
+  props: React.PropsWithChildren<RowComponentProps<T, E>>,
+) => React.ReactElement<any, any> | null;
+
+export type ITableOfContents<T extends TableOfContentsItem = TableOfContentsItem, E = {}> = {
+  contents: T[];
+
+  // Padding that will be used for (default: 10)
+  padding?: string;
+  className?: string;
+
+  /**
+   * Optionally customize how a row is rendered. Defaults to `DefaultRow`.
+   */
+  rowComponent?: RowComponentType<T, E>;
+
+  /**
+   * HTML data-test attribute to be set on the container div.
+   */
+  'data-test'?: string;
+
+  // Title of project
+  title?: string;
+
+  // Controls for the drawer functionality on mobile
+  isOpen?: boolean;
+  onClose?: () => void;
+
+  // Mobile breakpoint, default (true) is 786px, false disables Drawer
+  enableDrawer?: boolean | number;
+
+  withScroller?: boolean;
+} & ({} extends E ? { rowComponentExtraProps?: undefined } : { rowComponentExtraProps: E });
+
+// This is to avoid "mismatch" when rendering during SSR, since we render without scroll container in SSR
+let renderWithScroll = false;
+const useRenderWithScroll = () => {
+  const [, setTick] = React.useState(0);
+  return React.useEffect(() => {
+    if (!renderWithScroll) {
+      renderWithScroll = true;
+      setTick(1);
+    }
+  }, []);
+};
+
+function TableOfContentsInner<T extends TableOfContentsItem = TableOfContentsItem, E = {}>({
+  className,
+  contents,
+  rowComponent: RowComponent = DefaultRow,
+  rowComponentExtraProps,
+}: Pick<ITableOfContents<T, E>, 'className' | 'contents' | 'rowComponent' | 'rowComponentExtraProps'>) {
+  const [expanded, setExpanded] = React.useState(() => {
+    const itemsToExpand = contents.filter(item => item.startExpanded);
+    return Object.fromEntries(itemsToExpand.map(item => [contents.indexOf(item), true]));
+  });
+
+  // an array of functions. Invoking the N-th function toggles the expanded flag on the N-th content item
+  const toggleExpandedFunctions = React.useMemo(() => {
+    return range(contents.length).map(i => () => {
+      setExpanded(current => {
+        let childrenToCollapse = {};
+        if (current[i]) {
+          const item = contents[i];
+          const children = findDescendantIndices(item.depth ?? 0, i, contents.slice(i + 1));
+          childrenToCollapse = Object.fromEntries(children.map(i => [i, false]));
+        }
+
+        return {
+          ...current,
+          [i]: !current[i],
+          ...childrenToCollapse,
+        };
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contents, contents.length]);
+
+  // expand ancestors of active items by default
+  React.useEffect(() => {
+    const activeItems = contents.filter(item => item.isActive);
+    const itemsToExpand = flatMap(activeItems, item =>
+      findAncestorIndices(item.depth ?? 0, contents.slice(0, contents.indexOf(item))),
+    );
+    setExpanded(current => ({
+      ...current,
+      ...Object.fromEntries(itemsToExpand.map(index => [index, true])),
+    }));
+  }, [contents]);
+
+  return (
+    <div className={className}>
+      {contents.map((item, index) => {
+        const depth = item.depth || 0;
+
+        if (depth > 0) {
+          // Check if we should show this item
+          const parentIndex = findParentIndex(depth, contents.slice(0, index));
+          if (parentIndex > -1 && !expanded[parentIndex]) {
+            return null;
+          }
+        }
+
+        const isExpanded = expanded[index];
+
+        return (
+          // @ts-ignore
+          <RowComponent
+            key={index}
+            item={isExternalLink(item) ? { ...item, isExternalLink: true } : item}
+            index={index}
+            isExpanded={isExpanded}
+            toggleExpanded={toggleExpandedFunctions[index]}
+            extra={rowComponentExtraProps}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function TableOfContents<T extends TableOfContentsItem = TableOfContentsItem, E = {}>({
+  className,
+  'data-test': dataTest,
+  padding = '4',
+  title,
+  isOpen = false,
+  onClose = () => {},
+  withScroller,
+  ...innerProps
+}: ITableOfContents<T, E>) {
+  useRenderWithScroll();
+
+  const isMobile = false; // useIsMobile(enableDrawer);
+
+  const toc = <TableOfContentsInner className={cn(`py-${padding}`)} {...innerProps} />;
+
+  const containerClassName = cn('TableOfContents', className);
+  const comp = (
+    <>
+      <div className={containerClassName} data-test={dataTest}>
+        {renderWithScroll && withScroller ? <ScrollContainer>{toc}</ScrollContainer> : toc}
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer isOpen={isOpen} onClose={() => onClose()} position="left" size="330px">
+        <div className="flex flex-1 flex-col bg-gray-1 dark:bg-transparent">
+          <div className="border-b dark:border-lighten-4 h-20 py-6 px-2 bg-white">
+            <Button className="flex justify-start text-lg" icon={'arrow-left'} minimal onClick={() => onClose()}>
+              {title}
+            </Button>
+          </div>
+          <div className="h-full flex justify-end">{comp}</div>
+        </div>
+      </Drawer>
+    );
+  }
+
+  return comp;
+}
+
+function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggleExpanded }: RowComponentProps<T>) {
+  const isGroup = item.type === 'group';
+  const isGroupItem = isGroup && isTableOfContentsLink(item);
+  const isChild = item.type !== 'group' && (item.depth ?? 0) > 0;
+  const isDivider = item.type === 'divider';
+  const showSkeleton = item.showSkeleton;
+  const isSelected = item.isSelected && !showSkeleton;
+  const isActive = item.isActive && !showSkeleton;
+  const isDisabled = item.isDisabled;
+
+  const holderCallbackRef = React.useCallback((e: HTMLDivElement) => {
+    if (e && isActive) {
+      e.scrollIntoView({ block: 'center' });
+    }
+    // we only want this on initial render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  let icon = item.icon;
+  if (item.activeIcon && (isActive || isSelected)) {
+    icon = item.activeIcon;
+  }
+
+  const onClick = showSkeleton
+    ? undefined
+    : (e: React.MouseEvent) => {
+        if (item.isDisabled) {
+          e.preventDefault();
+          return;
+        }
+        if (item.onClick) {
+          item.onClick();
+        }
+
+        if (isDivider) {
+          e.preventDefault();
+          return;
+        }
+
+        if (!isGroup || isGroupItem) return;
+
+        e.preventDefault();
+        toggleExpanded();
+      };
+
+  const outerClassName = cn('TableOfContentsItem border-transparent', item.className, {
+    'border-l': !isGroup,
+    'TableOfContentsItem--selected': isActive,
+    'TableOfContentsItem--active': isSelected,
+    'TableOfContentsItem--group': isGroup,
+    'TableOfContentsItem--divider': isDivider,
+    'TableOfContentsItem--child border-gray-3 dark:border-lighten-3': isChild,
+  });
+
+  const innerClassName = cn(
+    'TableOfContentsItem__inner relative flex flex-col justify-center border-transparent border-l-4',
+    {
+      'cursor-pointer': onClick && !isDisabled,
+      'cursor-not-allowed': isDisabled,
+      'dark-hover:bg-lighten-2 hover:bg-darken-2':
+        !isDisabled && !isDivider && !isSelected && !isActive && !showSkeleton,
+      'dark:text-white bg-darken-2 dark:bg-lighten-2': isSelected || isActive,
+      'text-gray-7 dark:text-white': isActive,
+      'border-primary text-blue-6': isSelected,
+      'text-gray-6 dark:text-gray-6 font-semibold h-10': isDivider,
+      'text-gray-5 dark:text-gray-5 hover:text-gray-6': !isDivider && !isSelected && !isActive,
+    },
+  );
+
+  const loadingElem = item.isLoading ? (
+    <FAIcon icon={['far', 'spinner-third']} className="fa-spin text-gray-7 ml-2" />
+  ) : null;
+
+  const actionElem = item.action ? (
+    <Button
+      icon={
+        item.action.icon ? (
+          <FAIcon icon={item.action.icon} className={cn({ 'text-gray-5': !item.action.isActive })} />
+        ) : undefined
+      }
+      text={item.action.name}
+      onClick={showSkeleton ? undefined : item.action.onClick}
+      active={item.action.isActive}
+      intent={item.action.isActive ? 'primary' : undefined}
+      className="ml-2"
+      minimal
+      small
+    />
+  ) : null;
+
+  const iconElem = icon ? (
+    <FAIcon
+      className={cn('fa-fw', {
+        'mr-3': item.iconPosition !== 'right',
+        'mx-1': item.iconPosition === 'right',
+        'text-blue-6': isSelected,
+        [`text-${item.iconColor}`]: item.iconColor,
+        'bp3-skeleton': item.showSkeleton,
+      })}
+      icon={icon}
+    />
+  ) : item.textIcon ? (
+    <div
+      className={cn('text-right rounded px-1 text-xs uppercase', {
+        [`text-${item.iconColor}`]: item.iconColor,
+      })}
+    >
+      {item.textIcon}
+    </div>
+  ) : null;
+
+  return (
+    <div
+      onClick={onClick}
+      className={outerClassName}
+      style={{ marginLeft: (item.depth ?? 0) * 20 }}
+      ref={holderCallbackRef}
+    >
+      <div className={cn('-ml-px', innerClassName, { 'opacity-75': isDisabled })}>
+        <div className="flex flex-row items-center">
+          {item.iconPosition !== 'right' && iconElem}
+
+          <span className={cn('TableOfContentsItem__name flex-1 truncate', { 'bp3-skeleton': item.showSkeleton })}>
+            {item.name}
+          </span>
+
+          {item.meta && <span className="text-sm text-left text-gray font-medium">{item.meta}</span>}
+          {loadingElem}
+          {actionElem}
+          {item.iconPosition === 'right' && iconElem}
+          {isGroup && (
+            <div onClick={isGroupItem ? toggleExpanded : undefined} className="px-2">
+              <FAIcon className="TableOfContentsItem__icon" icon={isExpanded ? 'chevron-down' : 'chevron-right'} />
+            </div>
+          )}
+        </div>
+        {item.footer}
+      </div>
+    </div>
+  );
+}
+DefaultRowImpl.displayName = 'DefaultRow';
+
+export const DefaultRow = React.memo(DefaultRowImpl);
+
+/**
+ * Traverses contents backwards to find the first index with a lower depth
+ */
+function findParentIndex(currentDepth: number, contents: TableOfContentsItem[]): number {
+  for (let index = contents.length - 1; index >= 0; index--) {
+    if (contents[index].depth === currentDepth - 1) {
+      return index;
+    }
+  }
+
+  return -1;
+}
+
+function findAncestorIndices(currentDepth: number, precedingContents: TableOfContentsItem[]): number[] {
+  const parentIndex = findParentIndex(currentDepth, precedingContents);
+  if (parentIndex === -1) {
+    return [];
+  }
+
+  return [
+    ...findAncestorIndices(precedingContents[parentIndex].depth ?? 0, precedingContents.slice(0, parentIndex)),
+    parentIndex,
+  ];
+}
+
+function findDescendantIndices(
+  currentDepth: number,
+  currentIndex: number,
+  succeedingContents: TableOfContentsItem[],
+): number[] {
+  const children: number[] = [];
+  for (let index = 0; index < succeedingContents.length; index++) {
+    if ((succeedingContents[index].depth ?? 0) <= currentDepth) {
+      break;
+    } else {
+      children.push(currentIndex + index);
+    }
+  }
+
+  return children;
+}
+
+function isExternalLink(item: TableOfContentsItem): boolean {
+  return isTableOfContentsLink(item) && item.to !== void 0 && /^(http|#|mailto)/.test(item.to);
+}
+
+function isTableOfContentsLink(item: TableOfContentsItem): item is ITableOfContentsLink {
+  return 'to' in item;
+}

package/src/ThemeContainer/index.tsx

@@ -0,0 +1,24 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+/**
+ * THEME CONTAINER
+ */
+
+interface IThemeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  namespace?: string;
+  dark?: boolean;
+}
+
+const ThemeContainer: React.FunctionComponent<IThemeContainerProps> = props => {
+  const { namespace, dark, children } = props;
+
+  const bp_namespace = process.env.BLUEPRINT_NAMESPACE || 'bp3';
+
+  return <div className={cn(namespace, bp_namespace, dark && `${bp_namespace}-dark`, 'h-full w-full')}>{children}</div>;
+};
+
+/**
+ * EXPORTS
+ */
+export { ThemeContainer, IThemeContainerProps };