@spaced-out/ui-design-system 0.4.15 → 0.5.0

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

@@ -1,113 +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 {
-  getDataVizColor,
-  getLineChartOptions,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapper,
-  type ChartWrapperClassNames,
-  type ExportOptionType,
-} from '../ChartWrapper';
-
-import css from './LineChart.module.css';
-
-
-export type ClassNames = $ReadOnly<{
-  ...ChartWrapperClassNames,
-  highChart?: string,
-}>;
-
-export type LineSeriesItem = {
-  name: string,
-  data: DataOptionsType[],
-};
-
-export type LineChartProps = {
-  ...ChartOptions,
-  isLoading?: boolean,
-  classNames?: ClassNames,
-  cardTitle?: React.Node,
-  customExportOptions?: Array<ExportOptionType> | null,
-  series: Array<LineSeriesItem>,
-  headerActions?: React.Node,
-  drilldown?: Drilldown,
-  hasEmptyData?: boolean,
-  emptyText?: React.Node,
-  ...
-};
-
-export const LineChart = ({
-  isLoading,
-  classNames,
-  cardTitle,
-  customExportOptions,
-  series,
-  headerActions,
-  drilldown,
-  hasEmptyData,
-  emptyText,
-  ...userOptions
-}: LineChartProps): React.Node => {
-  const chartRef = React.createRef();
-
-  const lineChartSeries = series.map((seriesItem, index) => ({
-    ...seriesItem,
-    name: seriesItem.name,
-    data: seriesItem.data,
-    color: getDataVizColor(index),
-  }));
-
-  const defaultLineChartOptions = getLineChartOptions();
-
-  const columnDrilldown = drilldown
-    ? {
-      ...drilldown,
-      breadcrumbs: {floating: false},
-    }
-    : {};
-
-  //$FlowFixMe[cannot-spread-inexact]
-  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
-    series: lineChartSeries,
-    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.lineChartContainer, highChart),
-        }}
-        ref={chartRef}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

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

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

@@ -1,111 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-//$FlowFixMe[untyped-import]
-import Highcharts from 'highcharts';
-//$FlowFixMe[untyped-import]
-import highChartsMore from 'highcharts/highcharts-more';
-//$FlowFixMe[untyped-import]
-import HighchartsReact from 'highcharts-react-official';
-
-import type {ChartOptions, DataOptionsType} from '../../../types/charts';
-import {
-  getDataVizColor,
-  getSpiderChartOptions,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapper,
-  type ChartWrapperClassNames,
-  type ExportOptionType,
-} from '../ChartWrapper';
-
-import css from './SpiderChart.module.css';
-
-
-if (
-  !!highChartsMore &&
-  !!Highcharts &&
-  typeof highChartsMore === 'function' &&
-  typeof Highcharts === 'object'
-) {
-  highChartsMore(Highcharts);
-}
-
-export type ClassNames = $ReadOnly<{
-  ...ChartWrapperClassNames,
-  highChart?: string,
-}>;
-
-export type SpiderSeriesItem = {
-  name: string,
-  data: DataOptionsType[],
-};
-
-export type SpiderChartProps = {
-  ...ChartOptions,
-  isLoading?: boolean,
-  classNames?: ClassNames,
-  cardTitle?: React.Node,
-  customExportOptions?: Array<ExportOptionType> | null,
-  headerActions?: React.Node,
-  series: Array<SpiderSeriesItem>,
-  hasEmptyData?: boolean,
-  emptyText?: React.Node,
-  ...
-};
-
-export const SpiderChart = ({
-  isLoading,
-  classNames,
-  cardTitle,
-  customExportOptions,
-  headerActions,
-  series,
-  hasEmptyData,
-  emptyText,
-  ...userOptions
-}: SpiderChartProps): React.Node => {
-  const chartRef = React.useRef(null);
-
-  const spiderSeries = series.map((seriesItem, index) => ({
-    ...seriesItem,
-    name: seriesItem.name,
-    data: seriesItem.data,
-    pointPlacement: 'on',
-    color: getDataVizColor(index),
-  }));
-
-  const defaultSpiderChartOptions = getSpiderChartOptions();
-
-  //$FlowFixMe[cannot-spread-inexact]
-  const chartOptions = mergeChartUserOptions(defaultSpiderChartOptions, {
-    series: spiderSeries,
-    ...userOptions,
-  });
-
-  const {highChart, ...wrapperClassNames} = classNames || {};
-
-  return (
-    <ChartWrapper
-      isLoading={isLoading}
-      title={cardTitle}
-      ref={chartRef}
-      customExportOptions={customExportOptions}
-      classNames={wrapperClassNames}
-      headerActions={headerActions}
-      hasEmptyData={hasEmptyData}
-      emptyText={emptyText}
-    >
-      <HighchartsReact
-        highcharts={Highcharts}
-        ref={chartRef}
-        containerProps={{
-          className: classify(css.spiderChartContainer, highChart),
-        }}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

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

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

@@ -1,9 +0,0 @@
-// @flow strict
-
-export * from './ChartTooltip';
-export * from './ChartWrapper';
-export * from './ColumnChart';
-export * from './DonutChart';
-export * from './FunnelChart';
-export * from './LineChart';
-export * from './SpiderChart';

package/lib/components/ChatBubble/ChatBubble.js.flow

@@ -1,222 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {AvatarProps} from '../Avatar';
-import {Avatar} from '../Avatar';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './ChatBubble.module.css';
-
-
-const getNamedComponent = (
-  childrenArray: Array<React.Node>,
-  componentDisplayName: string,
-): ?React.Node | React.Node[] => {
-  const nodes: React.Node[] = [];
-  for (const child of childrenArray) {
-    if (
-      // $FlowFixMe
-      child?.type?.displayName === componentDisplayName
-    ) {
-      nodes.push(child);
-    }
-  }
-  return nodes.length > 1 ? nodes : nodes[0] || null;
-};
-
-export type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export const CHAT_BUBBLE_ORIENTATION = Object.freeze({
-  left: 'left',
-  right: 'right ',
-});
-
-export type ChatBubbleOrientation = $Values<typeof CHAT_BUBBLE_ORIENTATION>;
-
-export type ChatBubbleProps = {
-  classNames?: ClassNames,
-  orientation?: ChatBubbleOrientation,
-  children: React.Node,
-};
-
-export const ChatBubble: React$AbstractComponent<
-  ChatBubbleProps,
-  HTMLDivElement,
-> = React.forwardRef<ChatBubbleProps, HTMLDivElement>(
-  ({classNames, orientation = 'left', children}: ChatBubbleProps, ref) => {
-    const isLeftAligned = orientation === 'left';
-
-    const childrenArray: React.Node[] = React.Children.toArray(children);
-
-    const anchorComponent = getNamedComponent(childrenArray, 'ChatAnchor');
-    const chatComponent = getNamedComponent(childrenArray, 'ChatContent');
-
-    return (
-      <div
-        ref={ref}
-        data-testid="ChatBubble"
-        className={classify(
-          css.chatBubbleWrapper,
-          {
-            [css.chatBubbleWrapperRight]: !isLeftAligned,
-          },
-          classNames?.wrapper,
-        )}
-      >
-        {anchorComponent}
-        {chatComponent}
-      </div>
-    );
-  },
-);
-
-export type ChatAnchorProps = {
-  isAI?: boolean,
-  tooltip?: BaseTooltipProps,
-  classNames?: ClassNames,
-  avatarProps?: AvatarProps,
-};
-
-export const ChatAnchor = ({
-  isAI = true,
-  tooltip,
-  classNames,
-  avatarProps,
-}: ChatAnchorProps): React.Node => (
-  <div
-    data-testid="ChatAnchor"
-    className={classify(css.chatAnchorWrapper, classNames?.wrapper)}
-  >
-    <Tooltip {...tooltip} hidden={!tooltip}>
-      {isAI ? (
-        <Icon
-          name="sparkle"
-          color="information"
-          type={ICON_TYPE.solid}
-          size={ICON_SIZE.large}
-        />
-      ) : (
-        <Avatar {...avatarProps} />
-      )}
-    </Tooltip>
-  </div>
-);
-
-ChatAnchor.displayName = 'ChatAnchor';
-
-export type ChatContentProps = {classNames?: ClassNames, children?: React.Node};
-
-export const ChatContent = ({
-  classNames,
-  children,
-}: ChatContentProps): React.Node => (
-  <div
-    data-testid="ChatContent"
-    className={classify(css.chatContentWrapper, classNames?.wrapper)}
-  >
-    {children}
-  </div>
-);
-
-ChatContent.displayName = 'ChatContent';
-
-export type ChatBodyClassNames = $ReadOnly<{wrapper?: string, loader: string}>;
-
-export type ChatBodyProps = {
-  withBgColor?: boolean,
-  isLoading?: boolean,
-  loadingText?: string,
-  children?: React.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatBody = ({
-  withBgColor = true,
-  isLoading,
-  children,
-  loadingText = 'Generating',
-  classNames,
-}: ChatBodyProps): React.Node => (
-  <div
-    data-testid="ChatBody"
-    className={classify(
-      css.chatBodyWrapper,
-      {
-        [css.chatBodyWrapperLoading]: isLoading || !withBgColor,
-        [css.chatBodyWrapperBgColor]: withBgColor,
-      },
-      classNames?.wrapper,
-    )}
-  >
-    {isLoading ? (
-      <div className={classify(css.loadingContainer, classNames?.wrapper)}>
-        <span className={css.loadingText}>{loadingText}</span>
-        <span className={css.loader}>
-          <span className={css.dot} />
-          <span className={css.dot} />
-          <span className={css.dot} />
-        </span>
-      </div>
-    ) : (
-      children
-    )}
-  </div>
-);
-
-ChatBody.displayName = 'ChatBody';
-
-export type ChatFooterProps = {classNames?: ClassNames, children?: React.Node};
-
-export const ChatFooter = ({
-  children,
-  classNames,
-}: ChatFooterProps): React.Node => {
-  const childrenArray: React.Node[] = React.Children.toArray(children);
-
-  const leftSlot = getNamedComponent(childrenArray, 'ChatFooterLeftSlot');
-  const rightSlot = getNamedComponent(childrenArray, 'ChatFooterRightSlot');
-
-  return (
-    <div
-      data-testid="ChatFooter"
-      className={classify(css.chatFooterWrapper, classNames?.wrapper)}
-    >
-      {leftSlot}
-      {rightSlot}
-    </div>
-  );
-};
-
-ChatFooter.displayName = 'ChatFooter';
-
-export type ChatFooterRightSlotProps = {
-  children?: React.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatFooterRightSlot = ({
-  children,
-  classNames,
-}: ChatFooterRightSlotProps): React.Node => (
-  <div className={classNames?.wrapper}>{children}</div>
-);
-
-ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
-
-export type ChatFooterLeftSlotProps = {
-  children?: React.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatFooterLeftSlot = ({
-  children,
-  classNames,
-}: ChatFooterLeftSlotProps): React.Node => (
-  <div className={classNames?.wrapper}>{children}</div>
-);
-
-ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

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

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

package/lib/components/Checkbox/Checkbox.js.flow

@@ -1,168 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {GroupAlign} from '../../types/common';
-import classify from '../../utils/classify';
-import {Icon} from '../Icon';
-
-import css from './Checkbox.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  checkboxSquare?: string,
-  label?: string,
-}>;
-
-/*
-  Note: An indeterminate state has a higher priority.
-  If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
-*/
-
-export type CheckboxProps = {
-  name?: string,
-  value?: string,
-  children?: React.Node,
-  checked?: boolean,
-  indeterminate?: boolean,
-  focused?: boolean,
-  disabled?: boolean,
-  error?: boolean,
-  onChange?: (
-    {value: string, checked: boolean},
-    ?SyntheticEvent<HTMLElement>,
-  ) => mixed,
-  align?: GroupAlign,
-  classNames?: ClassNames,
-  tabIndex?: number,
-  ariaLabel?: string,
-};
-
-export const Checkbox: React$AbstractComponent<
-  CheckboxProps,
-  HTMLInputElement,
-> = React.forwardRef<CheckboxProps, HTMLInputElement>(
-  (
-    {
-      name = 'checkbox',
-      value = '',
-      children,
-      checked = false,
-      indeterminate = false,
-      focused = false,
-      disabled = false,
-      error = false,
-      onChange,
-      align,
-      classNames,
-      tabIndex = 0,
-      ariaLabel = '',
-    }: CheckboxProps,
-    forwardRef,
-  ): React.Node => {
-    const checkboxInput = React.createRef<HTMLInputElement>();
-    React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-
-    const handleOnClick = (event) => {
-      if (!disabled) {
-        onChange &&
-          onChange(
-            {
-              value,
-              checked: !checked,
-            },
-            event,
-          );
-      }
-    };
-
-    React.useEffect(() => {
-      if (checkboxInput.current && focused) {
-        checkboxInput.current.focus();
-      }
-    }, [focused]);
-
-    React.useEffect(() => {
-      if (checkboxInput.current && indeterminate) {
-        checkboxInput.current.indeterminate = true;
-      }
-      if (checkboxInput.current && !indeterminate) {
-        checkboxInput.current.indeterminate = false;
-      }
-    }, [indeterminate]);
-
-    return (
-      <div
-        data-testid="checkbox"
-        className={classify(
-          css.checkboxContainer,
-          {
-            [css.disabled]: disabled,
-            [css.horizontalCheckbox]: align === 'horizontal-fixed',
-            [css.fluidCheckbox]: align === 'horizontal-fluid',
-          },
-          classNames?.wrapper,
-        )}
-        onClick={handleOnClick}
-      >
-        <span
-          className={classify(
-            css.checkboxSquare,
-            {
-              [css.disabled]: disabled,
-            },
-            classNames?.checkboxSquare,
-          )}
-        >
-          <input
-            tabIndex={disabled ? -1 : tabIndex}
-            type="checkbox"
-            checked={checked}
-            readOnly
-            ref={checkboxInput}
-            className={classify(css.inputCheckbox)}
-            disabled={disabled}
-            name={name}
-            aria-label={ariaLabel || children}
-          />
-          <span
-            className={classify(css.checkboxSquareInner, {
-              [css.enabled]: !disabled && !error,
-              [css.disabled]: disabled,
-              [css.error]: error && !disabled,
-            })}
-          >
-            {indeterminate && (
-              <Icon
-                color={disabled ? 'disabled' : 'inversePrimary'}
-                name="hyphen"
-                size="small"
-                type="regular"
-              />
-            )}
-            {checked && !indeterminate && (
-              <Icon
-                color={disabled ? 'disabled' : 'inversePrimary'}
-                name="check"
-                size="small"
-                type="regular"
-              />
-            )}
-          </span>
-        </span>
-        {React.Children.count(children) > 0 && (
-          <div
-            className={classify(
-              css.checkboxLabel,
-              {[css.labelDisabled]: disabled},
-              classNames?.label,
-            )}
-          >
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  },
-);