@spaced-out/ui-design-system 0.4.15 → 0.5.0

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -1,161 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-
-import type {OptionButtonTooltipProps} from './OptionButton';
-import {OptionButton} from './OptionButton';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  baseButtonWrapper?: string,
-  baseButtonIcon?: string,
-  optionsButtonWrapper?: string,
-  optionsButtonIcon?: string,
-  dropdownContainer?: string,
-}>;
-
-export type SimpleOptionButtonRef = {
-  selectedKeys?: Array<string>,
-};
-
-export type SimpleOptionButtonProps = {
-  // Input props
-  ...ButtonProps,
-
-  classNames?: ClassNames,
-  tooltip?: OptionButtonTooltipProps,
-  anchorPosition?: AnchorType,
-  tooltip?: OptionButtonTooltipProps,
-  menuSize?: 'small' | 'medium',
-
-  // Menu props
-  options?: Array<MenuOption>,
-  optionsVariant?: MenuOptionsVariant,
-  allowSearch?: boolean,
-  selectedKeys?: Array<string>,
-  menuVirtualization?: Virtualization,
-  header?: React.Node,
-  footer?: React.Node,
-  menuClassNames?: MenuClassNames,
-  showLabelTooltip?: MenuLabelTooltip,
-  allowWrap?: boolean,
-  // events
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.Node,
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
-  const {
-    size = 'small',
-    classNames,
-    tooltip,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onButtonClick,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    menuSize = 'small',
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    clickAwayRef,
-    allowWrap = false,
-    ...buttonProps
-  } = props;
-
-  const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    setOptionButtonSelectedKeys(selectedKeys);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e) => {
-    e?.stopPropagation();
-    let newSelectedKeys = [selectedOption.key];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        optionButtonSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    setOptionButtonSelectedKeys(newSelectedKeys);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: optionButtonSelectedKeys,
-  }));
-
-  return (
-    <OptionButton
-      {...buttonProps}
-      tooltip={tooltip}
-      onButtonClick={onButtonClick}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        isFluid: false,
-        options,
-        selectedKeys: optionButtonSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size: menuSize,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {children}
-    </OptionButton>
-  );
-};
-
-export const SimpleOptionButton: React.AbstractComponent<
-  SimpleOptionButtonProps,
-  SimpleOptionButtonRef,
-> = React.forwardRef<SimpleOptionButtonProps, SimpleOptionButtonRef>(
-  SimpleOptionButtonBase,
-);

package/lib/components/OptionButton/index.js.flow

@@ -1,4 +0,0 @@
-//@flow strict
-
-export * from './OptionButton';
-export * from './SimpleOptionButton';

package/lib/components/PageTitle/PageTitle.js.flow

@@ -1,267 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {
-  colorIconPrimary,
-  colorIconSecondary,
-} from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import {TEXT_COLORS, TitleMedium} from '../Text';
-import {Tooltip} from '../Tooltip';
-
-import css from './PageTitle.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  leftSlot?: string,
-  rightSlot?: string,
-}>;
-
-export type PageTitleProps = {
-  classNames?: ClassNames,
-  children?: React.Node,
-  pageNameKey?: string,
-  showBackButton?: boolean,
-  onBack?: () => void,
-};
-
-export const PAGE_NAME_LIST = Object.freeze({
-  dashboard: {
-    title: 'Dashboard',
-    iconName: 'house',
-    iconType: 'duotone',
-  },
-  engage: {
-    title: 'Engage',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  journeys: {
-    title: 'Journeys',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  workflows: {
-    title: 'Workflows',
-    iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-  },
-  trm: {
-    title: 'TRM',
-    iconName: 'screen-users',
-    iconType: 'duotone',
-  },
-  analytics: {
-    title: 'Analytics',
-    iconName: 'chart-column',
-    iconType: 'duotone',
-  },
-  messaging: {
-    title: 'Messaging',
-    iconName: 'messages',
-    iconType: 'duotone',
-  },
-  chatbot: {
-    title: 'Chatbot',
-    iconName: 'message-bot',
-    iconType: 'duotone',
-  },
-  referrals: {
-    title: 'Referrals',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  records: {
-    title: 'Records',
-    iconName: 'folder-open',
-    iconType: 'duotone',
-  },
-  bulkCleanup: {
-    title: 'Bulk Cleanup',
-    iconName: 'retweet',
-    iconType: 'duotone',
-  },
-  support: {
-    title: 'Support',
-    iconName: 'headset',
-    iconType: 'duotone',
-  },
-  audit: {
-    title: 'Audit',
-    iconName: 'print-magnifying-glass',
-    iconType: 'duotone',
-  },
-  timeline: {
-    title: 'Timeline',
-    iconName: 'timeline',
-    iconType: 'duotone',
-  },
-  people: {
-    title: 'People',
-    iconName: 'people-group',
-    iconType: 'duotone',
-  },
-  jobs: {
-    title: 'Jobs',
-    iconName: 'briefcase',
-    iconType: 'duotone',
-  },
-  contacts: {
-    title: 'Contacts',
-    iconName: 'address-card',
-    iconType: 'duotone',
-  },
-  meetings: {
-    title: 'Meetings',
-    iconName: 'calendars',
-    iconType: 'duotone',
-  },
-  contacts3: {
-    title: 'Contacts',
-    iconName: 'browser',
-    iconType: 'duotone',
-  },
-  tracking: {
-    title: 'Tracking',
-    iconName: 'user-check',
-    iconType: 'duotone',
-  },
-  earnings: {
-    title: 'Earnings',
-    iconName: 'wallet',
-    iconType: 'duotone',
-  },
-  settings: {
-    title: 'Settings',
-    iconName: 'gear',
-    iconType: 'duotone',
-  },
-  broadcast: {
-    title: 'Broadcast',
-    iconName: 'bullhorn',
-    iconType: 'duotone',
-  },
-});
-
-export type TabSlotProps = {
-  children?: React.Node,
-  className: string,
-  ...
-};
-
-export const TabSlot = ({
-  children,
-  className,
-  ...props
-}: TabSlotProps): React.Node => (
-  <div {...props} className={classify(css.tabSlot, className)}>
-    {children}
-  </div>
-);
-
-TabSlot.displayName = 'TabSlot';
-
-export type RightSlotProps = {
-  children?: React.Node,
-  ...
-};
-
-export const RightSlot = ({children, ...props}: RightSlotProps): React.Node => (
-  <div {...props}>{children}</div>
-);
-
-RightSlot.displayName = 'RightSlot';
-
-export type PageNameProps = {
-  children?: React.Node,
-  ...
-};
-
-export const PageName = ({children, ...props}: PageNameProps): React.Node => (
-  <div {...props} className={css.pageTitle}>
-    {children}
-  </div>
-);
-PageName.displayName = 'PageName';
-
-export const PageTitle: React$AbstractComponent<
-  PageTitleProps,
-  HTMLDivElement,
-> = React.forwardRef<PageTitleProps, HTMLDivElement>(
-  (
-    {classNames, children, pageNameKey, showBackButton, onBack}: PageTitleProps,
-    ref,
-  ): React.Node => {
-    const getNamedComp = (comp: string) => {
-      const childrenArray = React.Children.toArray(children);
-      if (childrenArray.length) {
-        const nodes: React.Node[] = [];
-        for (const child of childrenArray) {
-          if (child?.type?.displayName === comp) {
-            nodes.push(child);
-          }
-        }
-        return nodes.length > 1 ? nodes : nodes[0];
-      }
-      return null;
-    };
-
-    const handleBack = () => {
-      onBack && onBack();
-    };
-
-    return (
-      <div
-        data-testid="PageTitle"
-        className={classify(css.pageTitleWrapper, classNames?.wrapper)}
-        ref={ref}
-      >
-        <div className={classify(css.leftSlot, classNames?.leftSlot)}>
-          <div className={css.headerWithBackBtn}>
-            {showBackButton && (
-              <Tooltip
-                title="Navigate Back"
-                delayMotionDuration="slow"
-                placement="top-start"
-              >
-                <Button
-                  onClick={handleBack}
-                  type="tertiary"
-                  iconLeftName="chevron-left"
-                  ariaLabel="Navigate Back Button"
-                />
-              </Tooltip>
-            )}
-            {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
-              <PageName>
-                <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
-                <Icon
-                  type={PAGE_NAME_LIST[pageNameKey].iconType}
-                  name={PAGE_NAME_LIST[pageNameKey].iconName}
-                  size="medium"
-                  color={TEXT_COLORS.primary}
-                  style={{
-                    '--fa-primary-color': colorIconPrimary,
-                    '--fa-secondary-color': colorIconSecondary,
-                    '--fa-primary-opacity': '1.0',
-                    '--fa-secondary-opacity': '1.0',
-                  }}
-                />
-              </PageName>
-            ) : (
-              getNamedComp('PageName')
-            )}
-          </div>
-          {getNamedComp('TabSlot')}
-        </div>
-        <div className={classify(css.rightSlot, classNames?.rightSlot)}>
-          {getNamedComp('RightSlot')}
-        </div>
-      </div>
-    );
-  },
-);

package/lib/components/PageTitle/index.js.flow

@@ -1,3 +0,0 @@
-// @flow strict
-
-export * from './PageTitle';

package/lib/components/Pagination/Pagination.js.flow

@@ -1,158 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {usePagination} from '../../hooks/usePagination';
-import {useWindowSize} from '../../hooks/useWindowSize';
-import classify from '../../utils/classify';
-import {range} from '../../utils/helpers';
-import {Dropdown} from '../Dropdown';
-import {SubTitleExtraSmall} from '../Text';
-
-import {PaginationItem} from './PaginationItem';
-
-import css from './Pagination.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  children?: string,
-  paginator?: string,
-}>;
-type MixedEvent = SyntheticEvent<EventTarget> | Event;
-type PaginationItemType =
-  | 'first'
-  | 'previous'
-  | 'page'
-  | 'start-ellipsis'
-  | 'end-ellipsis'
-  | 'last'
-  | 'next';
-
-export type PaginationBaseProps = {
-  currentPage?: number,
-  disabled?: boolean,
-  onChange?: (value?: ?number, event?: ?MixedEvent) => void,
-  totalPages?: number,
-  showFirstButton?: boolean,
-  showLastButton?: boolean,
-  hideNextButton?: boolean,
-  hidePrevButton?: boolean,
-  boundaryCount?: number,
-  siblingCount?: number,
-  style?: 'primary' | 'secondary',
-  staticPaginationLabel?: string,
-};
-
-export type PaginationProps = {
-  children?: React.Node,
-  ...PaginationBaseProps,
-  classNames?: ClassNames,
-};
-
-export type PaginationItemProps = {
-  id: string,
-  disabled: boolean,
-  onClick: (event: SyntheticEvent<HTMLElement>) => void,
-  page: ?number,
-  selected: boolean,
-  type: PaginationItemType,
-};
-
-const LARGE_LIST_DROPDOWN_OPTIONS = 50;
-
-const TABLET_SCREEN_SIZE = 640;
-
-export const Pagination: React$AbstractComponent<
-  PaginationProps,
-  HTMLDivElement,
-> = React.forwardRef<PaginationProps, HTMLDivElement>(
-  (props: PaginationProps, ref) => {
-    const {width} = useWindowSize();
-    const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
-    const {
-      classNames,
-      style = 'primary',
-      children,
-      currentPage = 1,
-      totalPages = 1,
-      onChange,
-      showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
-      showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
-      staticPaginationLabel,
-      ...restPaginationProps
-    } = props;
-    const showPageSelectionDropDown =
-      style !== 'primary' && showExtraSecPaginationButtons;
-
-    const {items} = usePagination({
-      style,
-      showFirstButton,
-      showLastButton,
-      currentPage,
-      totalPages,
-      onChange,
-      ...restPaginationProps,
-    });
-
-    const menuVirtualization = {
-      enable: totalPages > LARGE_LIST_DROPDOWN_OPTIONS ? true : false,
-    };
-
-    const allPages = range(1, totalPages);
-    const options =
-      style !== 'secondary'
-        ? []
-        : allPages.map((page) => ({
-          key: page.toString(),
-          label: page.toString(),
-        }));
-
-    return (
-      <div
-        ref={ref}
-        data-testid="Pagination"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        <div className={classify(css.childrenSlot, classNames?.children)}>
-          {children}
-        </div>
-        <div className={css.paginatorSlots}>
-          {style === 'secondary' && showPageSelectionDropDown && (
-            <>
-              <Dropdown
-                size="small"
-                classNames={{wrapper: css.dropdownWrapper}}
-                menu={{
-                  options,
-                  isFluid: true,
-                  classNames: {wrapper: css.menuWrapper},
-                  selectedKeys: currentPage ? [currentPage.toString()] : [],
-                  virtualization: menuVirtualization,
-                }}
-                dropdownInputText={currentPage.toString()}
-                onChange={(option) => onChange?.(parseInt(option.key))}
-              />
-              {!!totalPages && !!currentPage && (
-                <SubTitleExtraSmall
-                  color="tertiary"
-                  className={css.secondaryLabel}
-                >
-                  {staticPaginationLabel
-                    ? staticPaginationLabel
-                    : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`}
-                </SubTitleExtraSmall>
-              )}
-            </>
-          )}
-
-          <div className={classify(css.paginatorSlot, classNames?.paginator)}>
-            {items?.map((item) => (
-              <PaginationItem key={item.id} {...item} />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

package/lib/components/Pagination/PaginationItem.js.flow

@@ -1,120 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {ButtonTextSmall} from '../Text';
-
-import type {PaginationItemProps} from './Pagination';
-
-import css from './Pagination.module.css';
-
-
-export const PaginationButton = (props: PaginationItemProps): React.Node => {
-  const {disabled, onClick, page, selected, type} = props;
-  const paginationBtnRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (selected) {
-      paginationBtnRef.current?.blur();
-    }
-  }, [selected]);
-
-  switch (type) {
-  case 'first':
-    return (
-      <Button
-        classNames={{
-          icon: classify(css.icon, {[css.disabled]: disabled}),
-          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
-        }}
-        type={selected ? 'secondary' : 'ghost'}
-        size="small"
-        onClick={onClick}
-        disabled={disabled}
-        ref={paginationBtnRef}
-        iconLeftName="chevrons-left"
-        ariaLabel="First page"
-      ></Button>
-    );
-  case 'previous':
-    return (
-      <Button
-        classNames={{
-          icon: classify(css.icon, {[css.disabled]: disabled}),
-          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
-        }}
-        type={selected ? 'secondary' : 'ghost'}
-        size="small"
-        onClick={onClick}
-        disabled={disabled}
-        ref={paginationBtnRef}
-        iconLeftName="chevron-left"
-        ariaLabel="Previous page"
-      ></Button>
-    );
-  case 'page':
-    return (
-      <Button
-        classNames={{
-          wrapper: classify(css.paginatorButton, {[css.selected]: selected}),
-        }}
-        type={selected ? 'secondary' : 'ghost'}
-        size="small"
-        onClick={onClick}
-        disabled={disabled}
-        ref={paginationBtnRef}
-        tabIndex={selected ? -1 : 0}
-      >
-        {page}
-      </Button>
-    );
-  case 'start-ellipsis':
-  case 'end-ellipsis':
-    return (
-      <div className={classify(css.separator)}>
-        <ButtonTextSmall color="disabled">...</ButtonTextSmall>
-      </div>
-    );
-  case 'next':
-    return (
-      <Button
-        classNames={{
-          icon: classify(css.icon, {[css.disabled]: disabled}),
-          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
-        }}
-        type={selected ? 'secondary' : 'ghost'}
-        size="small"
-        onClick={onClick}
-        disabled={disabled}
-        ref={paginationBtnRef}
-        iconLeftName="chevron-right"
-        ariaLabel="Next page"
-      ></Button>
-    );
-  case 'last':
-    return (
-      <Button
-        classNames={{
-          icon: classify(css.icon, {[css.disabled]: disabled}),
-          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
-        }}
-        type={selected ? 'secondary' : 'ghost'}
-        size="small"
-        onClick={onClick}
-        disabled={disabled}
-        ref={paginationBtnRef}
-        iconLeftName="chevrons-right"
-        ariaLabel="Last page"
-      ></Button>
-    );
-
-  default:
-    break;
-  }
-};
-
-export const PaginationItem = (props: PaginationItemProps): React.Node => (
-  <PaginationButton {...props} />
-);