@spaced-out/ui-design-system 0.3.38 → 0.3.39

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.d.ts

@@ -0,0 +1,82 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../../utils/classify';
+import {Button} from '../../Button';
+import type {IconType} from '../../Icon';
+import css from './ButtonTab.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type ButtonTabProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  onButtonTabSelect?:
+    | ((
+        id: string,
+        e?: React.SyntheticEvent<HTMLElement> | null | undefined,
+      ) => unknown)
+    | null
+    | undefined;
+  iconName?: string;
+  iconType?: IconType;
+  size?: 'medium' | 'small';
+  isFluid?: boolean;
+  ariaLabel?: string;
+  id: string;
+  selectedButtonTabId?: string;
+  isLoading?: boolean;
+  isLeftCurved?: boolean;
+  isRightCurved?: boolean;
+};
+export const ButtonTab: React$AbstractComponent<
+  ButtonTabProps,
+  HTMLButtonElement
+> = React.forwardRef<ButtonTabProps, HTMLButtonElement>(
+  (
+    {
+      classNames,
+      children,
+      iconName,
+      iconType = 'regular',
+      size,
+      onButtonTabSelect,
+      id,
+      selectedButtonTabId,
+      disabled,
+      isLeftCurved,
+      isRightCurved,
+      ...props
+    }: ButtonTabProps,
+    ref,
+  ): React.ReactNode => (
+    <Button
+      {...props}
+      disabled={disabled}
+      size={size}
+      type="tertiary"
+      ref={ref}
+      classNames={{
+        wrapper: classify(
+          css.buttonTabWrapper,
+          {
+            [css.mediumButtonTab]: size === 'medium',
+            [css.smallButtonTab]: size === 'small',
+            [css.onlyIcon]: iconName && !children,
+            [css.isSelected]: id === selectedButtonTabId,
+            [css.disabled]: disabled,
+            [css.leftCurved]: isLeftCurved,
+            [css.rightCurved]: isRightCurved,
+          },
+          classNames?.wrapper,
+        ),
+        icon: css.icon,
+      }}
+      iconLeftName={iconName}
+      iconLeftType={iconType}
+      onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
+    >
+      {children}
+    </Button>
+  ),
+);

package/lib/components/ButtonTabs/ButtonTab/index.d.ts

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

package/lib/components/ButtonTabs/ButtonTabDropdown.d.ts

@@ -0,0 +1,118 @@
+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 {includes} from 'lodash';
+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 {Menu} from '../Menu';
+import type {ButtonTabProps} from './ButtonTab';
+import {ButtonTab} from './ButtonTab';
+import css from './ButtonTabDropdown.module.css';
+export type ButtonTabDropdownProps = ButtonTabProps & {
+  title: string;
+  anchorPosition?: AnchorType;
+  dropdownClass?: string;
+};
+export const ButtonTabDropdown = ({
+  title,
+  anchorPosition = 'bottom-end',
+  ...buttonTabProps
+}: ButtonTabDropdownProps): React.ReactNode => {
+  const menuBtnRef = React.useRef();
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect,
+    dropdownClass,
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map((child) => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize,
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size,
+    };
+  });
+  const moreTabSelectedId = includes(
+    menuOptions.map(({key}) => key),
+    selectedButtonTabId,
+  )
+    ? 'more-tab'
+    : selectedButtonTabId;
+  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="ButtonTabDropdown"
+          ref={menuBtnRef}
+          className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
+        >
+          <ButtonTab
+            {...buttonTabProps}
+            ref={mergeRefs([refs.setReference, triggerRef])}
+            selectedButtonTabId={moreTabSelectedId}
+            onButtonTabSelect={(id, e) => {
+              e?.stopPropagation();
+              onOpen();
+            }}
+          >
+            {title}
+          </ButtonTab>
+          {isOpen && (
+            <div
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                onSelect={(option, e) => {
+                  onTabSelect && onTabSelect(option.key, e);
+                  clickAway();
+                }}
+                size={size}
+                options={menuOptions}
+                onTabOut={clickAway}
+                selectedKeys={[selectedButtonTabId ?? '']}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/ButtonTabs/ButtonTabs.d.ts

@@ -0,0 +1,113 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import type {AnchorType} from '../ButtonDropdown';
+import {ButtonTabDropdown} from './ButtonTabDropdown';
+import css from './ButtonTabs.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  buttonTabDropdownWrapper?: string;
+}>;
+export type ButtonTabsProps = {
+  classNames?: ClassNames;
+  children: React.ReactNode;
+  isFluid?: boolean;
+  size?: 'medium' | 'small';
+  disabled?: boolean;
+  selectedButtonTabId?: string;
+  onButtonTabSelect?:
+    | ((
+        id: string,
+        e?: React.SyntheticEvent<HTMLElement> | null | undefined,
+      ) => unknown)
+    | null
+    | undefined;
+  wrapAfter?: number;
+  wrapTabTitle?: string;
+  anchorPosition?: AnchorType;
+};
+export const ButtonTabs: React$AbstractComponent<
+  ButtonTabsProps,
+  HTMLDivElement
+> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      isFluid,
+      size = 'medium',
+      disabled,
+      selectedButtonTabId,
+      onButtonTabSelect,
+      wrapAfter,
+      wrapTabTitle = 'more',
+      anchorPosition,
+    }: ButtonTabsProps,
+    ref,
+  ): React.ReactNode => {
+    const childrenArray = React.Children.toArray(children);
+    let unwrappedNodes = childrenArray;
+    let wrappedNodes = [];
+
+    if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+      unwrappedNodes = childrenArray.slice(0, wrapAfter);
+      wrappedNodes = childrenArray.slice(wrapAfter);
+
+      if (wrappedNodes.length) {
+        unwrappedNodes.push(
+          <ButtonTabDropdown
+            id="more-tab"
+            title={wrapTabTitle}
+            iconName="ellipsis-vertical"
+            anchorPosition={anchorPosition}
+            dropdownClass={classNames?.buttonTabDropdownWrapper}
+          >
+            {wrappedNodes}
+          </ButtonTabDropdown>,
+        );
+      }
+    }
+
+    const childrenWithProps = unwrappedNodes.map((child, index) => {
+      if (React.isValidElement(child)) {
+        const {disabled: disabledChild, classNames: classNamesChild} =
+          child.props;
+        const isFirst = index === 0;
+        const isLast = index === unwrappedNodes.length - 1;
+        return React.cloneElement(child, {
+          ...child.props,
+          isFluid,
+          size,
+          isLeftCurved: isFirst,
+          isRightCurved: isLast,
+          disabled: disabledChild || disabled,
+          selectedButtonTabId,
+          onButtonTabSelect,
+          classNames: {
+            wrapper: classNamesChild?.wrapper,
+          },
+        });
+      }
+
+      return child;
+    });
+    return (
+      <div
+        data-testid="ButtonTabs"
+        ref={ref}
+        className={classify(
+          css.buttonTabsWrapper,
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.isFluid]: isFluid,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,2 @@
+export * from './ButtonTab';
+export * from './ButtonTabs';

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,163 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import * as SPACES from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+import css from './Card.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+});
+export type PaddingSizeType = $Values<typeof PADDING_SIZES>;
+export type CardProps = {
+  classNames?: ClassNames;
+  children: React.ReactNode;
+  paddingTop?: PaddingSizeType;
+  paddingRight?: PaddingSizeType;
+  paddingBottom?: PaddingSizeType;
+  paddingLeft?: PaddingSizeType;
+};
+export type CardChildProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+export type ClickableCardProps = CardProps & {
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  disabled?: boolean;
+};
+
+const getPaddingValue = (size: PaddingSizeType): string => {
+  const spaceKey = 'space' + capitalize(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+
+export const CardHeader = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.cardHeader, className)}>
+    {children}
+  </div>
+);
+export const CardTitle = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.cardTitle, className)}>
+    {children}
+  </div>
+);
+export const CardActions = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.cardActions, className)}>
+    {children}
+  </div>
+);
+export const CardFooter = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.cardFooter, className)}>
+    {children}
+  </div>
+);
+export const CardContent = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.cardContent, className)}>
+    {children}
+  </div>
+);
+export const Card: React$AbstractComponent<CardProps, HTMLDivElement> =
+  React.forwardRef<CardProps, HTMLDivElement>(
+    (
+      {
+        children,
+        classNames,
+        paddingTop = 'medium',
+        paddingRight = 'medium',
+        paddingBottom = 'medium',
+        paddingLeft = 'medium',
+        ...props
+      }: CardProps,
+      ref,
+    ): React.ReactNode => (
+      <div
+        {...props}
+        style={{
+          '--card-padding-top': getPaddingValue(paddingTop),
+          '--card-padding-right': getPaddingValue(paddingRight),
+          '--card-padding-bottom': getPaddingValue(paddingBottom),
+          '--card-padding-left': getPaddingValue(paddingLeft),
+        }}
+        data-testid="Card"
+        className={classify(css.cardWrapper, classNames?.wrapper)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    ),
+  );
+export const ClickableCard: React$AbstractComponent<
+  ClickableCardProps,
+  HTMLDivElement
+> = React.forwardRef<ClickableCardProps, HTMLDivElement>(
+  (
+    {classNames, onClick, disabled = false, ...props}: ClickableCardProps,
+    ref,
+  ): React.ReactNode => {
+    const componentRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => componentRef.current);
+    React.useEffect(() => {
+      if (disabled) {
+        componentRef.current?.blur();
+      }
+    }, [disabled]);
+
+    const onClickHandler = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onClickHandler(e);
+      }
+    };
+
+    return (
+      <Card
+        {...props}
+        classNames={{
+          wrapper: classify(
+            css.clickableCard,
+            {
+              [css.disabled]: disabled,
+            },
+            classNames?.wrapper,
+          ),
+        }}
+        tabIndex={disabled ? -1 : 0}
+        onClick={onClickHandler}
+        onKeyDown={onKeyDownHandler}
+        ref={ref}
+      />
+    );
+  },
+);

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

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

package/lib/components/Charts/ChartTooltip/index.d.ts

@@ -0,0 +1,10 @@
+import type {Tooltip} from '../../../types/charts';
+import typographyCss from '../../../styles/typography.module.css';
+import css from './ChartTooltip.module.css';
+export const tooltipTheme: Tooltip = {
+  headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
+  pointFormat: `<span class=${css.tooltipPoint}>
+      <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
+      <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
+    </span>`,
+};

package/lib/components/Charts/ChartWrapper/ChartWrapper.d.ts

@@ -0,0 +1,184 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+import accessibility from 'highcharts/modules/accessibility';
+//@ts-expect-error[untyped-import]
+import drilldown from 'highcharts/modules/drilldown';
+//@ts-expect-error[untyped-import]
+import exporting from 'highcharts/modules/exporting';
+import {size180} from '../../../styles/variables/_size';
+import classify from '../../../utils/classify';
+import {ANCHOR_POSITION_TYPE, ButtonDropdown} from '../../ButtonDropdown';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../Card';
+import {CircularLoader} from '../../CircularLoader';
+import type {MenuOption} from '../../Menu';
+import css from './ChartWrapper.module.css';
+export type ExportOptionType = {
+  key: string;
+  label: string;
+  format: string;
+};
+export const EXPORT_OPTIONS = Object.freeze({
+  download_as_png: {
+    key: 'download_as_png',
+    label: 'Download as PNG',
+    format: 'image/png',
+  },
+  download_as_jpeg: {
+    key: 'download_as_jpeg',
+    label: 'Download as JPEG',
+    format: 'image/jpeg',
+  },
+  download_as_pdf: {
+    key: 'download_as_pdf',
+    label: 'Download as PDF',
+    format: 'application/pdf',
+  },
+  download_as_svg: {
+    key: 'download_as_svg',
+    label: 'Download as SVG',
+    format: 'image/svg+xml',
+  },
+});
+// on assumption that all export options will be shown by default
+const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(
+  (exportKey) => EXPORT_OPTIONS[exportKey],
+);
+type CustomExportButtonProps = {
+  ref?: HTMLDivElement;
+  customExportOptions?: Array<ExportOptionType> | null;
+};
+const CustomExportButton = React.forwardRef<
+  CustomExportButtonProps,
+  HTMLDivElement
+>(({customExportOptions = null}: CustomExportButtonProps, ref) => {
+  exporting(Highcharts);
+  drilldown(Highcharts);
+  accessibility(Highcharts);
+  const exportOptions = customExportOptions
+    ? customExportOptions
+    : DEFAULT_EXPORT_OPTIONS;
+  const menuOptions: Array<MenuOption> = exportOptions.map((exportOption) => {
+    const {key, label} = exportOption;
+    return {
+      key,
+      label,
+    };
+  });
+
+  const handleDownload = (exportKey: string): void => {
+    const exportOptionObject = exportOptions.find(
+      (exportOption) => exportOption.key === exportKey,
+    );
+    const exportFormat = exportOptionObject?.format || '';
+
+    if (ref.current) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-use]
+      ref.current.chart?.exportChart({
+        type: exportFormat,
+      });
+    }
+  };
+
+  return (
+    <ButtonDropdown
+      ariaLabel="Export Chart Menu"
+      menu={{
+        isFluid: true,
+        menuDisabled: false,
+        options: menuOptions,
+        size: 'medium',
+        width: size180,
+      }}
+      iconLeftName="ellipsis"
+      onOptionSelect={(option) => handleDownload(option.key)}
+      size="small"
+      type="ghost"
+      anchorPosition={ANCHOR_POSITION_TYPE.bottomEnd}
+    />
+  );
+});
+export type ChartWrapperClassNames = $ReadOnly<{
+  wrapper?: string;
+  header?: string;
+  title?: string;
+  actions?: string;
+  content?: string;
+  loader?: string;
+}>;
+type ChartWrapperProps = {
+  isLoading?: boolean;
+  title: React.ReactNode;
+  children?: React.ReactNode;
+  classNames?: ChartWrapperClassNames;
+  customExportOptions?: Array<ExportOptionType> | null;
+  headerActions?: React.ReactNode;
+  hasEmptyData?: boolean;
+  emptyText?: React.ReactNode;
+};
+export const ChartWrapper: React$AbstractComponent<
+  ChartWrapperProps,
+  HTMLDivElement
+> = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
+  (
+    {
+      isLoading,
+      title,
+      children,
+      classNames,
+      customExportOptions,
+      headerActions,
+      hasEmptyData = false,
+      emptyText,
+    }: ChartWrapperProps,
+    ref,
+  ): React.ReactNode => (
+    <Card
+      classNames={{
+        wrapper: classify(
+          css.wrapper,
+          {
+            [css.justifyCenter]: isLoading,
+          },
+          classNames?.wrapper,
+        ),
+      }}
+    >
+      {isLoading ? (
+        <CircularLoader
+          size="large"
+          className={classify(css.loader, classNames?.loader)}
+        />
+      ) : (
+        <>
+          <CardHeader className={classNames?.header}>
+            <CardTitle className={classNames?.title}>{title}</CardTitle>
+            <CardActions
+              className={classify(css.chartCardActions, classNames?.actions)}
+            >
+              <CustomExportButton
+                ref={ref}
+                customExportOptions={customExportOptions}
+              />
+              {headerActions ? headerActions : null}
+            </CardActions>
+          </CardHeader>
+          <CardContent
+            className={classify(css.chartContent, classNames?.content)}
+          >
+            {hasEmptyData && emptyText ? emptyText : children}
+          </CardContent>
+        </>
+      )}
+    </Card>
+  ),
+);

package/lib/components/Charts/ChartWrapper/index.d.ts

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