@spaced-out/ui-design-system 0.4.13 → 0.4.15-beta.0

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -1,121 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {AnchorType} from '../ButtonDropdown';
-import type {ElevationType} from '../Tooltip';
-
-import {ButtonTabDropdown} from './ButtonTabDropdown';
-
-import css from './ButtonTabs.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  buttonTabDropdownWrapper?: string,
-}>;
-
-export type ButtonTabsProps = {
-  classNames?: ClassNames,
-  children: React.Node,
-  isFluid?: boolean,
-  size?: 'medium' | 'small',
-  disabled?: boolean,
-  selectedButtonTabId?: string,
-  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
-  wrapAfter?: number,
-  elevation?: ElevationType,
-  wrapTabTitle?: string,
-  anchorPosition?: AnchorType,
-};
-
-export const ButtonTabs: React$AbstractComponent<
-  ButtonTabsProps,
-  HTMLDivElement,
-> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      children,
-      isFluid,
-      size = 'medium',
-      disabled,
-      selectedButtonTabId,
-      onButtonTabSelect,
-      wrapAfter,
-      elevation = 'modal',
-      wrapTabTitle = 'more',
-      anchorPosition,
-    }: ButtonTabsProps,
-    ref,
-  ): React.Node => {
-    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"
-            elevation={elevation}
-            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.js.flow

@@ -1,4 +0,0 @@
-// @flow strict
-
-export * from './ButtonTab';
-export * from './ButtonTabs';

package/lib/components/Card/Card.js.flow

@@ -1,174 +0,0 @@
-// @flow strict
-
-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',
-  none: 'none',
-});
-
-export type PaddingSizeType = $Values<typeof PADDING_SIZES>;
-
-export type CardProps = {
-  classNames?: ClassNames,
-  children: React.Node,
-  paddingTop?: PaddingSizeType,
-  paddingRight?: PaddingSizeType,
-  paddingBottom?: PaddingSizeType,
-  paddingLeft?: PaddingSizeType,
-  ...
-};
-
-export type CardChildProps = {
-  className?: string,
-  children: React.Node,
-  ...
-};
-
-export type ClickableCardProps = {
-  ...CardProps,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  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.Node => (
-  <div {...props} className={classify(css.cardHeader, className)}>
-    {children}
-  </div>
-);
-
-export const CardTitle = ({
-  className,
-  children,
-  ...props
-}: CardChildProps): React.Node => (
-  <div {...props} className={classify(css.cardTitle, className)}>
-    {children}
-  </div>
-);
-
-export const CardActions = ({
-  className,
-  children,
-  ...props
-}: CardChildProps): React.Node => (
-  <div {...props} className={classify(css.cardActions, className)}>
-    {children}
-  </div>
-);
-
-export const CardFooter = ({
-  className,
-  children,
-  ...props
-}: CardChildProps): React.Node => (
-  <div {...props} className={classify(css.cardFooter, className)}>
-    {children}
-  </div>
-);
-
-export const CardContent = ({
-  className,
-  children,
-  ...props
-}: CardChildProps): React.Node => (
-  <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.Node => (
-      <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.Node => {
-    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.js.flow

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

package/lib/components/Charts/ChartTooltip/index.js.flow

@@ -1,15 +0,0 @@
-// @flow strict
-
-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.js.flow

@@ -1,190 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-//$FlowFixMe[untyped-import]
-import Highcharts from 'highcharts';
-//$FlowFixMe[untyped-import]
-import accessibility from 'highcharts/modules/accessibility';
-//$FlowFixMe[untyped-import]
-import drilldown from 'highcharts/modules/drilldown';
-//$FlowFixMe[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.Node,
-  children?: React.Node,
-  classNames?: ChartWrapperClassNames,
-  customExportOptions?: Array<ExportOptionType> | null,
-  headerActions?: React.Node,
-  hasEmptyData?: boolean,
-  emptyText?: React.Node,
-};
-
-export const ChartWrapper: React$AbstractComponent<
-  ChartWrapperProps,
-  HTMLDivElement,
-> = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
-  (
-    {
-      isLoading,
-      title,
-      children,
-      classNames,
-      customExportOptions,
-      headerActions,
-      hasEmptyData = false,
-      emptyText,
-    }: ChartWrapperProps,
-    ref,
-  ): React.Node => (
-    <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.js.flow

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

package/lib/components/Charts/ColumnChart/ColumnChart.js.flow

@@ -1,126 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-//$FlowFixMe[untyped-import]
-import Highcharts from 'highcharts';
-//$FlowFixMe[untyped-import]
-import HighchartsReact from 'highcharts-react-official';
-
-import type {
-  ChartOptions,
-  DataOptionsType,
-  Drilldown,
-} from '../../../types/charts';
-import {
-  columnPlotWidth,
-  getColumnChartOptions,
-  getDataVizColor,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  type ChartWrapperClassNames,
-  type ExportOptionType,
-  ChartWrapper,
-} from '../ChartWrapper';
-
-import css from './ColumnChart.module.css';
-
-
-export type ClassNames = $ReadOnly<{
-  ...ChartWrapperClassNames,
-  highChart?: string,
-}>;
-
-export type ColumnSeries = {
-  name: string,
-  data: DataOptionsType[],
-};
-
-export type ColumnChartProps = {
-  ...ChartOptions,
-  isLoading?: boolean,
-  classNames?: ClassNames,
-  cardTitle?: React.Node,
-  customExportOptions?: Array<ExportOptionType> | null,
-  series: Array<ColumnSeries>,
-  drilldown?: Drilldown,
-  headerActions?: React.Node,
-  hasEmptyData?: boolean,
-  emptyText?: React.Node,
-  ...
-};
-
-export const ColumnChart = ({
-  isLoading,
-  classNames,
-  cardTitle,
-  customExportOptions,
-  series,
-  drilldown,
-  headerActions,
-  hasEmptyData,
-  emptyText,
-  ...userOptions
-}: ColumnChartProps): React.Node => {
-  const chartRef = React.createRef();
-
-  const columnChartSeries = series.map((seriesItem, index) => ({
-    ...seriesItem,
-    name: seriesItem.name,
-    data: seriesItem.data,
-    color: getDataVizColor(index),
-    pointWidth: columnPlotWidth,
-  }));
-
-  const addColorToDrilldownSeries = (series) =>
-    series?.map((seriesItem) => ({
-      ...seriesItem,
-      data: seriesItem.data.map((dataItem, index) => ({
-        ...dataItem,
-        color: getDataVizColor(index),
-        pointWidth: columnPlotWidth,
-      })),
-    }));
-
-  const columnDrilldown = drilldown
-    ? {
-      ...drilldown,
-      series: addColorToDrilldownSeries(drilldown.series),
-      breadcrumbs: {floating: false},
-    }
-    : {};
-
-  const defaultColumnChartOptions = getColumnChartOptions();
-
-  //$FlowFixMe[cannot-spread-inexact]
-  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
-    series: columnChartSeries,
-    drilldown: columnDrilldown,
-    ...userOptions,
-  });
-
-  const {highChart, ...wrapperClassNames} = classNames || {};
-
-  return (
-    <ChartWrapper
-      isLoading={isLoading}
-      title={cardTitle}
-      ref={chartRef}
-      classNames={wrapperClassNames}
-      customExportOptions={customExportOptions}
-      headerActions={headerActions}
-      hasEmptyData={hasEmptyData}
-      emptyText={emptyText}
-    >
-      <HighchartsReact
-        highcharts={Highcharts}
-        containerProps={{
-          className: classify(css.columnChartContainer, highChart),
-        }}
-        ref={chartRef}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

package/lib/components/Charts/ColumnChart/index.js.flow

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