@spaced-out/ui-design-system 0.3.45 → 0.3.47-beta.0

package/lib/components/OptionButton/SimpleOptionButton.d.ts

@@ -1,150 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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 = 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.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  // events
-  onOptionSelect?: (
-    option: MenuOption,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onButtonClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  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.d.ts

@@ -1,2 +0,0 @@
-export * from './OptionButton';
-export * from './SimpleOptionButton';

package/lib/components/PageTitle/PageTitle.d.ts

@@ -1,256 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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.ReactNode;
-  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.ReactNode;
-  className: string;
-};
-export const TabSlot = ({
-  children,
-  className,
-  ...props
-}: TabSlotProps): React.ReactNode => (
-  <div {...props} className={classify(css.tabSlot, className)}>
-    {children}
-  </div>
-);
-TabSlot.displayName = 'TabSlot';
-export type RightSlotProps = {
-  children?: React.ReactNode;
-};
-export const RightSlot = ({
-  children,
-  ...props
-}: RightSlotProps): React.ReactNode => <div {...props}>{children}</div>;
-RightSlot.displayName = 'RightSlot';
-export type PageNameProps = {
-  children?: React.ReactNode;
-};
-export const PageName = ({
-  children,
-  ...props
-}: PageNameProps): React.ReactNode => (
-  <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.ReactNode => {
-    const getNamedComp = (comp: string) => {
-      const childrenArray = React.Children.toArray(children);
-
-      if (childrenArray.length) {
-        const nodes: React.ReactNode[] = [];
-
-        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.d.ts

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

package/lib/components/Pagination/Pagination.d.ts

@@ -1,144 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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 = React.SyntheticEvent<EventTarget> | Event;
-type PaginationItemType =
-  | 'first'
-  | 'previous'
-  | 'page'
-  | 'start-ellipsis'
-  | 'end-ellipsis'
-  | 'last'
-  | 'next';
-export type PaginationBaseProps = {
-  currentPage?: number;
-  disabled?: boolean;
-  onChange?: (
-    value?: number | null | undefined,
-    event?: MixedEvent | null | undefined,
-  ) => void;
-  totalPages?: number;
-  showFirstButton?: boolean;
-  showLastButton?: boolean;
-  hideNextButton?: boolean;
-  hidePrevButton?: boolean;
-  boundaryCount?: number;
-  siblingCount?: number;
-  style?: 'primary' | 'secondary';
-};
-export type PaginationProps = PaginationBaseProps & {
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-};
-export type PaginationItemProps = {
-  id: string;
-  disabled: boolean;
-  onClick: (event: React.SyntheticEvent<HTMLElement>) => void;
-  page: number | null | undefined;
-  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,
-      ...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}
-                >
-                  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.d.ts

@@ -1,136 +0,0 @@
-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.ReactNode => {
-  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.ReactNode => (
-  <PaginationButton {...props} />
-);

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

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