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

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

@@ -0,0 +1,150 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import {ButtonDropdown} from '../ButtonDropdown';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {MenuOption, MenuProps} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+import css from './OptionButton.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  baseButtonWrapper?: string;
+  baseButtonIcon?: string;
+  optionsButtonWrapper?: string;
+  optionsButtonIcon?: string;
+  dropdownContainer?: string;
+}>;
+export type OptionButtonTooltipProps = {
+  baseButton?: BaseTooltipProps;
+  optionsButton?: BaseTooltipProps;
+};
+export type OptionButtonProps = ButtonProps & {
+  menu?: MenuProps;
+  anchorPosition?: AnchorType;
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onButtonClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  tooltip?: OptionButtonTooltipProps;
+  classNames?: ClassNames;
+  clickAwayRef?: ClickAwayRefType;
+};
+export const OptionButton: React$AbstractComponent<
+  OptionButtonProps,
+  HTMLDivElement
+> = React.forwardRef<OptionButtonProps, HTMLDivElement>(
+  (
+    {
+      children,
+      iconLeftName,
+      iconLeftType,
+      type,
+      isFluid,
+      disabled,
+      size,
+      isLoading,
+      menu,
+      anchorPosition,
+      onOptionSelect,
+      onButtonClick,
+      onMenuOpen,
+      onMenuClose,
+      ariaLabel,
+      actionType,
+      tooltip,
+      classNames,
+      clickAwayRef,
+    }: OptionButtonProps,
+    ref,
+  ): React.ReactNode => {
+    const [iconName, setIconName] = React.useState('chevron-down');
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    return (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.isFluid]: isFluid,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <ConditionalWrapper
+          condition={Boolean(tooltip?.baseButton)}
+          wrapper={(children) => (
+            <Tooltip
+              {...tooltip?.baseButton}
+              hidden={isMenuOpen ? true : tooltip?.optionsButton?.hidden}
+            >
+              {children}
+            </Tooltip>
+          )}
+        >
+          <Button
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            onClick={onButtonClick}
+            size={size}
+            type={type}
+            disabled={disabled}
+            isFluid={isFluid}
+            ariaLabel={ariaLabel}
+            actionType={actionType}
+            isLoading={isLoading}
+            classNames={{
+              wrapper: classify(css.leftButton, classNames?.baseButtonWrapper),
+              icon: classNames?.baseButtonIcon,
+            }}
+          >
+            {children}
+          </Button>
+        </ConditionalWrapper>
+        <ButtonDropdown
+          anchorPosition={anchorPosition}
+          ariaLabel={ariaLabel}
+          iconLeftName={iconName}
+          tooltip={tooltip?.optionsButton}
+          classNames={{
+            buttonWrapper: classify(
+              css.rightButton,
+              classNames?.optionsButtonWrapper,
+            ),
+            dropdownContainer: classify(
+              css.dropDownContainer,
+              classNames?.dropdownContainer,
+            ),
+            buttonIcon: classNames?.optionsButtonIcon,
+          }}
+          type={type}
+          disabled={disabled}
+          menu={menu}
+          onMenuClose={() => {
+            setIconName('chevron-down');
+            setIsMenuOpen(false);
+            onMenuOpen && onMenuOpen();
+          }}
+          onMenuOpen={() => {
+            setIconName('chevron-up');
+            setIsMenuOpen(true);
+            onMenuClose && onMenuClose();
+          }}
+          onOptionSelect={onOptionSelect}
+          size={size}
+          clickAwayRef={clickAwayRef}
+        />
+      </div>
+    );
+  },
+);

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

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

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

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

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

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

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

@@ -0,0 +1,144 @@
+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>
+    );
+  },
+);