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

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

@@ -0,0 +1,115 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import Funnel from 'highcharts/modules/funnel';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../../types/charts';
+import {mergeChartUserOptions} from '../../../utils/charts';
+import {
+  addColorsToFunnelDrilldownSeries,
+  addColorsToFunnelSeries,
+  getFunnelChartOptions,
+} from '../../../utils/charts/funnelChart';
+import classify from '../../../utils/classify';
+import {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
+
+import css from './FunnelChart.module.css';
+
+
+export type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+export type FunnelSeriesItem = {
+  name?: string,
+  showInLegend?: boolean,
+  data: Array<DataOptionsType>,
+};
+
+export type FunnelChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  series: Array<FunnelSeriesItem>,
+  headerActions?: React.Node,
+  drilldown?: Drilldown,
+  showLegend?: boolean,
+  hasEmptyData?: boolean,
+  emptyText?: React.Node,
+  ...
+};
+
+export const FunnelChart = ({
+  isLoading,
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  headerActions,
+  drilldown,
+  showLegend = true,
+  hasEmptyData,
+  emptyText,
+  ...userOptions
+}: FunnelChartProps): React.Node => {
+  Funnel(Highcharts);
+  const chartRef = React.createRef();
+
+  const funnelChartSeries = addColorsToFunnelSeries(series, showLegend);
+
+  const defaultFunnelChartOptions = getFunnelChartOptions();
+
+  const columnDrilldown = drilldown
+    ? {
+      ...addColorsToFunnelDrilldownSeries(drilldown, showLegend),
+      breadcrumbs: {floating: false},
+    }
+    : {};
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultFunnelChartOptions, {
+    series: funnelChartSeries,
+    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.funnelChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -13,6 +13,8 @@ var _ChartWrapper = require("../ChartWrapper");
 var _LineChartModule = _interopRequireDefault(require("./LineChart.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 const LineChart = _ref => {
   let {
     isLoading,
@@ -40,6 +42,8 @@ const LineChart = _ref => {
       floating: false
     }
   } : {};
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: lineChartSeries,
     drilldown: columnDrilldown,
@@ -51,9 +55,7 @@ const LineChart = _ref => {
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,
     customExportOptions: customExportOptions,
@@ -64,9 +66,7 @@ const LineChart = _ref => {
     highcharts: _highcharts.default,
     containerProps: {
       className: (0, _classify.default)(_LineChartModule.default.lineChartContainer, highChart)
-    }
-    // @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-    ,
+    },
     ref: chartRef,
     options: chartOptions
   }));

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

@@ -0,0 +1,113 @@
+// @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 {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} 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

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

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

@@ -14,6 +14,9 @@ var _ChartWrapper = require("../ChartWrapper");
 var _SpiderChartModule = _interopRequireDefault(require("./SpiderChart.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 if (!!_highchartsMore.default && !!_highcharts.default && typeof _highchartsMore.default === 'function' && typeof _highcharts.default === 'object') {
   (0, _highchartsMore.default)(_highcharts.default);
 }
@@ -38,6 +41,8 @@ const SpiderChart = _ref => {
     color: (0, _charts.getDataVizColor)(index)
   }));
   const defaultSpiderChartOptions = (0, _charts.getSpiderChartOptions)();
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultSpiderChartOptions, {
     series: spiderSeries,
     ...userOptions

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

@@ -0,0 +1,111 @@
+// @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 {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} 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

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

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

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

@@ -17,7 +17,7 @@ const getNamedComponent = (childrenArray, componentDisplayName) => {
   const nodes = [];
   for (const child of childrenArray) {
     if (
-    // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
+    // $FlowFixMe
     child?.type?.displayName === componentDisplayName) {
       nodes.push(child);
     }
@@ -58,10 +58,7 @@ const ChatAnchor = _ref2 => {
     className: (0, _classify.default)(_ChatBubbleModule.default.chatAnchorWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
     hidden: !tooltip
-  }), isAI ?
-  /*#__PURE__*/
-  // @ts-ignore - TS2769 - No overload matches this call.
-  React.createElement(_Icon.Icon, {
+  }), isAI ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "sparkle",
     color: "information",
     type: _Icon.ICON_TYPE.solid,

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

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

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

package/lib/components/Checkbox/Checkbox.js

@@ -14,7 +14,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
   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.
 */
-
 const Checkbox = exports.Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'checkbox',
@@ -32,7 +31,6 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/React.forwardRef((_ref, forward
     ariaLabel = ''
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
-  // @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
   const handleOnClick = event => {
     if (!disabled) {