@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

package/lib/components/Table/hooks.d.ts

@@ -0,0 +1,98 @@
+import {$Keys} from 'utility-types';
+import * as React from 'react';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import type {GenericObject} from './Table';
+export type SortDirection = 'asc' | 'desc' | 'original';
+export function useSortableEntries<T extends GenericObject>(
+  entries: Array<T>,
+  idName: $Keys<T>,
+  {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort,
+    enableInternalSorting = true,
+  }: {
+    defaultSortKey?: $Keys<T>;
+    defaultSortDirection?: SortDirection;
+    onSort?: (sortKey: string, sortDirection: SortDirection) => unknown;
+    enableInternalSorting?: boolean;
+  },
+): {
+  handleSortClick: (sortKey: $Keys<T>) => unknown;
+  sortDirection: SortDirection;
+  sortKey?: string;
+  sortedEntries: T[];
+  sortedKeys: $Keys<T>[];
+} {
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] =
+    React.useState<SortDirection>(defaultSortDirection);
+
+  const getNextDirection = (direction: SortDirection): SortDirection => {
+    switch (direction) {
+      case 'original':
+        return 'desc';
+
+      case 'asc':
+        return 'original';
+
+      case 'desc':
+        return 'asc';
+
+      default:
+        return 'original';
+    }
+  };
+
+  const advanceSortDirection = (dir: SortDirection) => {
+    const nextDirection = getNextDirection(dir);
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    setSortDirection((dir) => nextDirection);
+    return nextDirection;
+  };
+
+  const handleSortClick = React.useCallback(
+    (nextSortKey: string) => {
+      let nextSortDirection;
+
+      if (nextSortKey === sortKey) {
+        nextSortDirection = advanceSortDirection(sortDirection);
+      } else {
+        setSortKey(nextSortKey);
+        nextSortDirection = 'desc';
+      }
+
+      setSortDirection(nextSortDirection);
+      onSort?.(nextSortKey, nextSortDirection);
+    },
+    [sortKey, sortDirection, entries],
+  );
+  const sortedEntries = React.useMemo(() => {
+    if (!enableInternalSorting || sortDirection === 'original') {
+      return entries;
+    }
+
+    const caseInsensitiveSortFunction = (entry) => {
+      if (typeof entry[sortKey] === 'string') {
+        return entry[sortKey].toLowerCase();
+      }
+
+      return entry[sortKey];
+    };
+
+    const sortedAsc = sortBy(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedAsc : sortedAsc.reverse();
+  }, [sortDirection, sortKey, entries, enableInternalSorting]);
+  const sortedKeys = React.useMemo(
+    () => sortedEntries.map((ent) => get(ent, idName)),
+    [sortedEntries],
+  );
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick,
+  };
+}

package/lib/components/Table/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Cell';
+export * from './DefaultRow';
+export * from './DefaultTableHeader';
+export * from './StaticTable';
+export * from './Table';
+export * from './TableActionBar';
+export * from './TableBottomBar';
+export * from './TableTopBar';

package/lib/components/Tabs/Tab/Tab.d.ts

@@ -0,0 +1,146 @@
+import {$ReadOnly, $Keys} from 'utility-types';
+import * as React from 'react';
+import {TEXT_COLORS} from '../../../types/typography';
+import {classify} from '../../../utils/classify';
+import {UnstyledButton} from '../../Button';
+import type {IconType} from '../../Icon';
+import {Icon} from '../../Icon';
+import {ButtonTextMedium, ButtonTextSmall} from '../../Text';
+import css from './Tab.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  iconTextWrap?: string;
+}>;
+export const TAB_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+export const tabSizeOptions: Array<unknown> = [...Object.keys(TAB_SIZE)];
+export type TabSize = $Keys<typeof TAB_SIZE>;
+export type TabProps = {
+  classNames?: ClassNames;
+  onSelect?: (arg0: {tabId?: string; label?: string}) => unknown;
+  size?: TabSize;
+  selectedTab?: {
+    tabId?: string;
+    label?: string;
+  };
+  disabled?: boolean;
+  tabId?: string;
+  label?: string;
+  iconName?: string;
+  iconType?: IconType;
+  width?: string;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+};
+export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
+  React.forwardRef<TabProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        onSelect,
+        size = 'medium',
+        selectedTab,
+        disabled = false,
+        tabId,
+        label,
+        iconName,
+        iconType,
+        onClick,
+        width,
+        ...props
+      }: TabProps,
+      forwardRef,
+    ) => {
+      const tabRef = React.useRef(null);
+      React.useImperativeHandle(forwardRef, () => tabRef.current);
+      const selected = tabId && tabId === selectedTab?.tabId;
+
+      const onClickHandler = (e) => {
+        if (!disabled) {
+          e.preventDefault();
+          onSelect &&
+            onSelect({
+              tabId,
+              label,
+            });
+          onClick && onClick(e);
+          tabRef.current?.blur();
+        }
+      };
+
+      return (
+        <UnstyledButton
+          {...props}
+          disabled={disabled}
+          className={classify(
+            css.button,
+            {
+              [css.selected]: selected === true,
+              [css.disabled]: disabled === true,
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClickHandler}
+          style={{
+            width,
+          }}
+          tabIndex={disabled ? -1 : 0}
+          ref={tabRef}
+        >
+          <span
+            className={classify(
+              css.iconTextWrap,
+              {
+                [css.selected]: selected === true,
+                [css.disabled]: disabled === true,
+              },
+              classNames?.iconTextWrap,
+            )}
+          >
+            {iconName ? (
+              <Icon
+                name={iconName}
+                type={iconType}
+                size={size}
+                className={classify(css.icon, {
+                  [css.disabled]: disabled === true,
+                })}
+              />
+            ) : null}
+
+            {label && (
+              <>
+                {size === TAB_SIZE.medium ? (
+                  <ButtonTextMedium
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextMedium>
+                ) : (
+                  <ButtonTextSmall
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.selected]: selected === true,
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextSmall>
+                )}
+              </>
+            )}
+          </span>
+        </UnstyledButton>
+      );
+    },
+  );
+Tab.displayName = 'Tab';

package/lib/components/Tabs/Tab/index.d.ts

@@ -0,0 +1 @@
+export * from './Tab';

package/lib/components/Tabs/TabList/TabDropdown.d.ts

@@ -0,0 +1,100 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate, // $FlowFixMe[untyped-import]
+  flip, // $FlowFixMe[untyped-import]
+  offset, // $FlowFixMe[untyped-import]
+  shift, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
+import {ClickAway} from '../../../utils/click-away';
+import {mergeRefs} from '../../../utils/merge-refs';
+import type {AnchorType} from '../../ButtonDropdown';
+import type {MenuOption, MenuProps} from '../../Menu';
+import {Menu} from '../../Menu';
+import type {TabProps} from '../Tab';
+import {Tab} from '../Tab';
+import css from './TabDropdown.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type TabDropdownProps = {
+  anchorPosition?: AnchorType;
+  size?: 'medium' | 'small';
+  props?: {
+    tab: TabProps;
+    menu: MenuProps;
+  };
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  classNames?: ClassNames;
+  selected?: boolean;
+  disabled?: boolean;
+};
+export const TabDropdown = ({
+  anchorPosition = 'bottom-start',
+  size,
+  onOptionSelect,
+  props,
+  classNames,
+}: TabDropdownProps): React.ReactNode => {
+  const menuBtnRef = React.useRef();
+  const {x, y, refs, strategy} = useFloating({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        <div
+          data-testid="TabDropdown"
+          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
+          ref={menuBtnRef}
+        >
+          <Tab
+            {...props?.tab}
+            size={size}
+            ref={mergeRefs([refs.setReference, triggerRef])}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+            classNames={{
+              wrapper: css.dotTabWrapper,
+              iconTextWrap: css.dotTextWrap,
+            }}
+          />
+          {isOpen && props?.menu && (
+            <div
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                {...props.menu}
+                onSelect={(option, e) => {
+                  onOptionSelect && onOptionSelect(option, e);
+                  clickAway();
+                }}
+                size={props.menu.size || size}
+                onTabOut={clickAway}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,157 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
+import {size36, size100} from '../../../styles/variables/_size';
+import {spaceMedium} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
+import {TabDropdown} from './TabDropdown';
+import css from './TabList.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type TabListProps = {
+  classNames?: ClassNames;
+  onSelect?: (arg0: {tabId: string; label?: string}) => unknown;
+  children?: React.ReactNode;
+  size?: 'medium';
+  selectedTab?: {
+    tabId: string;
+    label?: string;
+  };
+  menuWidth?: string;
+};
+export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
+  React.forwardRef<TabListProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        children,
+        size,
+        onSelect,
+        selectedTab,
+        menuWidth,
+      }: TabListProps,
+      forwardRef,
+    ): React.ReactNode => {
+      const ref = React.useRef(null);
+      React.useImperativeHandle(forwardRef, () => ref.current);
+      const {width} = useWindowSize();
+      const [containerWidth, setContainerWidth] = React.useState(0);
+
+      const childrenWithProps = () => {
+        const childrenArray = React.Children.toArray(children);
+        const totalChildCount = childrenArray.length;
+        let tabListWidth = 0;
+        const menuOptions = [];
+        let nodes: React.ReactNode[] = [];
+        const tabListNodes: React.ReactNode[] = [];
+
+        for (let i = 0; i < totalChildCount; i++) {
+          const child = childrenArray[i];
+          const {
+            width = size100,
+            tabId,
+            label,
+            disabled,
+            iconName,
+            iconType,
+          } = child.props;
+          const widthInt = parseInt(width);
+          tabListWidth = tabListWidth + widthInt;
+
+          if (tabListWidth < containerWidth || i === 0) {
+            const childOnSelect = (params) => {
+              onSelect && onSelect(params); // call the tab level onSelect
+            };
+
+            tabListNodes.push(
+              React.cloneElement(child, {
+                size,
+                onSelect: childOnSelect,
+                selectedTab,
+              }),
+            );
+          } else {
+            menuOptions.push({
+              key: tabId,
+              label,
+              disabled,
+              iconLeft: iconName,
+              iconLeftType: iconType,
+            });
+          }
+        }
+
+        const menuOnSelect = ({key, label}) => {
+          onSelect &&
+            onSelect({
+              tabId: key,
+              label,
+            });
+        };
+
+        const selectedKeys = [selectedTab?.tabId || ''];
+
+        const isMenuOptionSelected = (() => {
+          for (let i = 0; i < menuOptions.length; i++) {
+            if (menuOptions[i].key === selectedTab?.tabId) {
+              return true;
+            }
+          }
+
+          return false;
+        })();
+
+        const tabDropDownNode = menuOptions.length ? (
+          <TabDropdown
+            key={'tabDropdown' + menuOptions.length}
+            size={size}
+            onOptionSelect={menuOnSelect}
+            props={{
+              tab: {
+                iconName: 'ellipsis',
+                tabId: 'tab-dropdown',
+                selectedTab: {
+                  tabId: isMenuOptionSelected ? 'tab-dropdown' : '',
+                },
+              },
+              menu: {
+                isFluid: false,
+                menuDisabled: false,
+                options: menuOptions,
+                selectedKeys,
+                width: menuWidth,
+              },
+            }}
+          />
+        ) : null;
+        nodes = [...tabListNodes, tabDropDownNode];
+        return nodes;
+      };
+
+      React.useLayoutEffect(() => {
+        if (ref.current && ref.current.offsetWidth) {
+          const availableContainerWidth =
+            ref.current.offsetWidth -
+            (parseInt(size36) + parseInt(spaceMedium));
+          setContainerWidth(availableContainerWidth);
+        } // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
+      }, [ref.current, width]);
+      return (
+        <div
+          ref={ref}
+          data-testid="Tabs"
+          className={classify(
+            css.tabsContainer,
+            {
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+        >
+          {containerWidth ? childrenWithProps() : null}
+        </div>
+      );
+    },
+  );

package/lib/components/Tabs/TabList/index.d.ts

@@ -0,0 +1 @@
+export * from './TabList';

package/lib/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './TabList';