@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

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

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

package/lib/components/Pagination/Pagination.js

@@ -77,9 +77,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
       selectedKeys: currentPage ? [currentPage.toString()] : [],
       virtualization: menuVirtualization
     },
-    dropdownInputText: currentPage.toString()
-    // @ts-ignore - TS2339 - Property 'key' does not exist on type 'ChangeEvent<HTMLInputElement> | MenuOption'.
-    ,
+    dropdownInputText: currentPage.toString(),
     onChange: option => onChange?.(parseInt(option.key))
   }), !!totalPages && !!currentPage && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: "tertiary",

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

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

@@ -22,7 +22,6 @@ const PaginationButton = props => {
   const paginationBtnRef = React.useRef(null);
   React.useEffect(() => {
     if (selected) {
-      // @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
       paginationBtnRef.current?.blur();
     }
   }, [selected]);
@@ -124,8 +123,6 @@ const PaginationButton = props => {
       break;
   }
 };
-
-// @ts-ignore - TS2786 - 'PaginationButton' cannot be used as a JSX component.
 exports.PaginationButton = PaginationButton;
 const PaginationItem = props => /*#__PURE__*/React.createElement(PaginationButton, props);
 exports.PaginationItem = PaginationItem;

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

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

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

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