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

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

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

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

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

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

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

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

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

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

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

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

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

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

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