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

package/lib/types/charts.js.flow

@@ -0,0 +1,263 @@
+// @flow strict
+
+export type ChartOptions = {
+  chart?: {
+    polar?: boolean,
+    type?: string,
+    spacing?: Array<number>,
+    margin?: Array<number>,
+    style?: CSSObject,
+    spacing?: [number, number, number, number],
+    spacingBottom?: number,
+    spacingLeft?: number,
+    spacingRight?: number,
+    spacingTop?: number,
+    ...
+  },
+  title?: {
+    align?: string,
+    floating?: boolean,
+    margin?: number,
+    style?: {
+      color?: string,
+      fontWeight?: string,
+    },
+    text?: string | null,
+    useHTML?: boolean,
+    verticalAlign?: 'top' | 'middle' | 'bottom',
+    widthAdjust?: number,
+    x?: number,
+    y?: number,
+  },
+  exporting?: {
+    allowHTML?: boolean,
+    allowTableSorting?: boolean,
+    buttons?: {
+      contextButton?: {
+        enabled?: boolean,
+      },
+    },
+    enabled?: boolean,
+    filename?: string,
+    showExportInProgress?: boolean,
+    showTable?: boolean,
+    sourceHeight?: number,
+    sourceWidth?: number,
+    useRowspanHeaders?: boolean,
+    width?: number,
+    ...
+  },
+  credits?: Credits,
+  tooltip?: Tooltip,
+  xAxis?: AxisOptions,
+  yAxis?: AxisOptions,
+  zAxis?: AxisOptions,
+  drilldown?: Drilldown,
+  legend?: LegendOptionsType,
+  plotOptions?: PlotOptionsType,
+  series?: Array<SeriesOptionsType>,
+  subtitle?: {
+    useHTML: boolean,
+    text?: string,
+    verticalAlign?: 'middle',
+    align?: string,
+    style?: CSSObject,
+    x?: number,
+    ...
+  },
+  pane?: {
+    center?: [string, string],
+    size?: string,
+    ...
+  },
+  legend?: Legend,
+  navigation?: Navigation,
+  ...
+};
+
+export type AxisOptions = {
+  categories?: Array<string>,
+  gridLineInterpolation?: 'circle' | 'polygon',
+  lineWidth?: number,
+  tickmarkPlacement?: string,
+  labels?: {
+    align?: string,
+    distance?: number,
+    style?: CSSObject,
+    ...
+  },
+  title?: {
+    text?: string,
+    margin?: number,
+    style?: CSSObject,
+    ...
+  },
+  type?: string,
+  ...
+};
+
+export type BreadcrumbsOptions = {
+  floating?: boolean,
+  style?: CSSObject,
+  ...
+};
+
+export type LegendOptionsType = {
+  layout?: string,
+  align?: string,
+  verticalAlign?: string,
+  itemMarginBottom?: number,
+  padding?: number,
+  itemStyle?: CSSObject,
+  enabled?: boolean,
+  symbolHeight?: number,
+  symbolWidth?: number,
+  ...
+};
+
+export type CSSObject = {
+  alignItems?: string,
+  color?: string,
+  display?: string,
+  fontFamily?: string,
+  fontSize?: string,
+  fontStyle?: string,
+  fontWeight?: string,
+  letterSpacing?: string,
+  lineHeight?: string,
+  margin?: number,
+  textAlign?: string,
+  minWidth?: string,
+  maxWidth?: string,
+  minHeight?: string,
+  maxHeight?: string,
+  alignContent?: string,
+  overflow?: string,
+  textOverflow?: string,
+  zIndex?: number,
+  ...
+};
+
+export type DataOptionsType = {
+  y?: number,
+  name?: string,
+  color?: string,
+  drilldown?: string,
+  id?: string,
+  ...
+};
+
+export type SeriesOptionsType = {
+  id?: string,
+  name?: string,
+  data: Array<DataOptionsType>,
+  ...
+};
+
+export type Drilldown = {
+  activeAxisLabelStyle?: CSSObject,
+  activeDataLabelStyle?: CSSObject,
+  series?: Array<SeriesOptionsType>,
+  breadcrumbs?: BreadcrumbsOptions,
+  ...
+};
+
+export type PlotOptionsType = {
+  ['pie' | 'line' | 'funnel']: {
+    innerSize?: string,
+    allowPointSelect?: boolean,
+    cursor?: 'pointer',
+    dataLabels?: {
+      enabled?: boolean,
+      distance?: number,
+      connectorColor?: string,
+      useHTML?: boolean,
+      format?: string,
+      style?: CSSObject,
+    },
+    showInLegend?: boolean,
+    center?: [string, string],
+    size?: string,
+    minSize?: number | string,
+    borderWidth?: number,
+    borderRadius?: number,
+    neckWidth?: string | number,
+    neckHeight?: string | number,
+    minSize?: string | number,
+    width?: string | number,
+    ...
+  },
+};
+
+export type Tooltip = {
+  useHTML?: boolean,
+  followPointer?: boolean,
+  backgroundColor?: string,
+  style?: CSSObject,
+  outside?: boolean,
+  headerFormat?: string,
+  pointFormat?: string,
+  shared?: boolean,
+  ...
+};
+
+export type Legend = {
+  align?: 'left' | 'center' | 'right',
+  alignColumns?: boolean,
+  backgroundColor?: string,
+  borderColor?: string,
+  borderRadius?: number,
+  borderWidth?: number,
+  className?: string,
+  enabled?: boolean,
+  floating?: boolean,
+  itemDistance?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  labelFormat?: string,
+  layout?: 'horizontal' | 'vertical' | 'proximate',
+  margin?: number,
+  maxHeight?: number,
+  padding?: number,
+  reversed?: boolean,
+  x?: number,
+  y?: number,
+  ...
+};
+
+export type Credits = {
+  enabled?: boolean,
+  href?: string,
+  position?: {
+    align?: 'right' | 'left',
+    verticalAlign?: 'bottom' | 'top',
+    x?: number,
+    y?: number,
+  },
+  ...
+};
+
+export type Navigation = {
+  breadcrumbs?: Breadcrumbs,
+  ...
+};
+
+export type Breadcrumbs = {
+  position?: Position,
+  style?: CSSObject,
+  buttonTheme?: ButtonTheme,
+  ...
+};
+
+export type ButtonTheme = {
+  style?: CSSObject,
+  ...
+};
+
+export type Position = {
+  align?: string,
+  verticalAlign?: string,
+  x?: number,
+  y?: number,
+};

package/lib/types/common.js.flow

@@ -0,0 +1,13 @@
+// @flow strict
+
+export type GroupAlign = 'vertical' | 'horizontal-fixed' | 'horizontal-fluid';
+
+export const ALERT_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;

package/lib/types/date-range-picker.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/lib/types/date-range-picker.js.flow

@@ -0,0 +1,17 @@
+// @flow strict
+
+export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
+export type DateRange = {startDate?: ?string, endDate?: ?string};
+export type DateRangePickerErrorTypes = {
+  [key: string]: {type: string, description: string},
+};
+export type DateRangePickerError = {
+  type: string,
+  description: string,
+};
+export type DateRangeWithTimezone = {
+  ...DateRange,
+  startDateUTC?: ?string,
+  endDateUTC?: ?string,
+  timezone?: string,
+};

package/lib/types/index.js.flow

@@ -0,0 +1,8 @@
+// @flow strict
+
+export * from './charts';
+export * from './common';
+export * from './date-range-picker';
+export * from './menu';
+export * from './toast';
+export * from './typography';

package/lib/types/menu.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/lib/types/menu.js.flow

@@ -0,0 +1,15 @@
+// @flow strict
+
+export type MenuClassNames = $ReadOnly<{
+  wrapper?: string,
+  option?: string,
+  groupTitle?: string,
+  optionTextContainer?: string,
+  optionTextLabel?: string,
+  header?: string,
+  footer?: string,
+}>;
+
+export type MenuLabelTooltip = {
+  maxLines?: number,
+};

package/lib/types/toast.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.POSITIONS = exports.ACTIONS = void 0;
+var React = _interopRequireWildcard(require("react"));
+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); }
 const POSITIONS = exports.POSITIONS = {
   TOP_CENTER: 'topCenter',
   TOP_LEFT: 'topLeft',

package/lib/types/toast.js.flow

@@ -0,0 +1,41 @@
+// @flow strict
+
+import * as React from 'react';
+
+
+export const POSITIONS = {
+  TOP_CENTER: 'topCenter',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  BOTTOM_CENTER: 'bottomCenter',
+};
+
+export const ACTIONS = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE',
+};
+
+export type positionTypes = $Values<typeof POSITIONS>;
+export type actionTypes = $Values<typeof ACTIONS>;
+export type contentTypes = React.Node;
+
+export type ToastOptions = {
+  timeout?: number,
+  position?: positionTypes,
+  autoClose?: boolean,
+  uniqueCode?: string | number,
+};
+
+export type optionTypes = {
+  ...ToastOptions,
+  id: string,
+  key?: string,
+};
+
+export type callbackFuncTypes = (
+  type: actionTypes,
+  content: contentTypes,
+  options: optionTypes,
+) => void;

package/lib/types/typography.js.flow

@@ -0,0 +1,19 @@
+// @flow strict
+
+export const TEXT_COLORS = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  disabled: 'disabled',
+  clickable: 'clickable',
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  inversePrimary: 'inversePrimary',
+  inverseSecondary: 'inverseSecondary',
+  favorite: 'favorite',
+});
+
+export type ColorTypes = $Values<typeof TEXT_COLORS>;

package/lib/utils/array/are-arrays-equal.js.flow

@@ -0,0 +1,14 @@
+// @flow strict
+
+type ItemComparer<Item> = (a: Item, b: Item) => boolean;
+
+export function areArraysEqual<Item>(
+  array1: Item[],
+  array2: Item[],
+  itemComparer: ItemComparer<Item> = (a, b) => a === b,
+): boolean {
+  return (
+    array1.length === array2.length &&
+    array1.every((value, index) => itemComparer(value, array2[index]))
+  );
+}

package/lib/utils/array/index.js.flow

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

package/lib/utils/charts/charts.js

@@ -54,14 +54,12 @@ const commonChartOptions = exports.commonChartOptions = {
     breadcrumbs: {
       floating: true,
       style: breadcrumbStyle,
-      // @ts-ignore - TS2322 - Type '{ floating: true; style: { readonly color: "#565656"; readonly fontSize: "12px"; readonly letterSpacing: "0em"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; buttonTheme: { ...; }; }' is not assignable to type 'BreadcrumbsOptions'.
       buttonTheme: {
         style: breadcrumbStyle
       }
     }
   },
   legend: {
-    // @ts-ignore - TS2322 - Type '{ paddingTop: string; fontSize: "12px"; fontFamily: "Centra No 2"; fontStyle: "normal"; margin: 0; color: "#17172A"; letterSpacing: "0em"; fontWeight: "500"; display: "flex"; alignItems: "center"; }' is not assignable to type 'CSSObject'.
     itemStyle: {
       ..._typography.formLabelSmall,
       paddingTop: '1px'
@@ -71,7 +69,6 @@ const commonChartOptions = exports.commonChartOptions = {
   },
   xAxis: {
     type: 'category',
-    // @ts-ignore - TS2322 - Type '{ type: string; padding: number; }' is not assignable to type 'AxisOptions'.
     padding: 0
   },
   navigation: {
@@ -81,7 +78,6 @@ const commonChartOptions = exports.commonChartOptions = {
           color: _color.colorFillInversePrimary
         }
       },
-      // @ts-ignore - TS2322 - Type '{ buttonTheme: { style: { color: string; }; }; separator: { text: string; }; }' is not assignable to type 'Breadcrumbs'.
       separator: {
         text: '>'
       }

package/lib/utils/charts/charts.js.flow

@@ -0,0 +1,111 @@
+// @flow strict
+
+import {
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+  colorFillInversePrimary,
+  colorTextSecondary,
+  colorTooltipFill,
+} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+
+import {deepMerge} from './helpers';
+import {formLabelSmall, subTitleExtraSmall} from './typography';
+
+import css from '../../components/Charts/ChartTooltip/ChartTooltip.module.css';
+import typographyCss from '../../styles/typography.module.css';
+
+
+export const DATA_VIZ_COLORS = [
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+];
+
+export const getDataVizColor = (dataIndex: number): string => {
+  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
+  return DATA_VIZ_COLORS[colorIndex];
+};
+
+export const breadcrumbStyle = {
+  ...subTitleExtraSmall,
+  color: colorTextSecondary,
+};
+
+export const commonChartOptions: $Shape<ChartOptions> = {
+  chart: {
+    spacingBottom: 0,
+    spacingLeft: 0,
+    spacingRight: 0,
+  },
+  title: {
+    text: null,
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false,
+      },
+    },
+  },
+  credits: {
+    enabled: false,
+  },
+  tooltip: {
+    followPointer: false,
+    backgroundColor: colorTooltipFill,
+    useHTML: true,
+    outside: true,
+    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>`,
+  },
+  drilldown: {
+    breadcrumbs: {
+      floating: true,
+      style: breadcrumbStyle,
+      buttonTheme: {
+        style: breadcrumbStyle,
+      },
+    },
+  },
+  legend: {
+    itemStyle: {...formLabelSmall, paddingTop: '1px'},
+    symbolHeight: 8,
+    enabled: true,
+  },
+  xAxis: {
+    type: 'category',
+    padding: 0,
+  },
+  navigation: {
+    breadcrumbs: {
+      buttonTheme: {
+        style: {
+          color: colorFillInversePrimary,
+        },
+      },
+      separator: {
+        text: '>',
+      },
+    },
+  },
+};
+
+export const mergeChartUserOptions = (
+  defaultoptions: ChartOptions,
+  userOptions: ChartOptions,
+): ChartOptions => deepMerge(defaultoptions, userOptions);

package/lib/utils/charts/columnChart.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getColumnChartOptions = exports.columnPlotWidth = void 0;
-var _color = require("../../styles/variables/_color");
+var _color = require("../../styles/variables/_color.js");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 /**
  * This function modifies the the common chart behavior to column chart default behavior.
  * It will not take userPassed option into account.
  */
-
 const getColumnChartOptions = () => ({
   ..._charts.commonChartOptions,
   chart: {
@@ -32,7 +31,6 @@ const getColumnChartOptions = () => ({
       margin: 12,
       style: _helpers.xAxisTitleStyle
     },
-    // @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly letterSpacing: "0.01em"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string |...' is not assignable to type 'AxisOptions'.
     lineColor: _color.colorBorderPrimary
   },
   yAxis: {

package/lib/utils/charts/columnChart.js.flow

@@ -0,0 +1,63 @@
+// @flow strict
+
+import {colorBorderPrimary} from '../../styles/variables/_color.js';
+import type {ChartOptions} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {
+  activeLabelStyle,
+  bottomLegendRow,
+  xAxisLabelStyle,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+
+/**
+ * This function modifies the the common chart behavior to column chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getColumnChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    ...commonChartOptions.chart,
+    type: 'column',
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...bottomLegendRow,
+    symbolWidth: 18,
+  },
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: xAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+    lineColor: colorBorderPrimary,
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+  drilldown: {
+    activeAxisLabelStyle: activeLabelStyle,
+    activeDataLabelStyle: activeLabelStyle,
+    breadcrumbs: {
+      floating: true,
+    },
+  },
+});
+
+export const columnPlotWidth = 28;

package/lib/utils/charts/donutChart.js

@@ -45,18 +45,14 @@ const getDonutChartOptions = _ref => {
       type: 'pie',
       spacing: [0, 0, 0, 0],
       margin: [0, 0, 0, 0],
-      // @ts-ignore - TS2322 - Type '{ type: string; spacing: number[]; margin: number[]; events: { render(): void; }; polar?: boolean | undefined; style?: CSSObject | undefined; spacingBottom?: number | undefined; spacingLeft?: number | undefined; spacingRight?: number | undefined; spacingTop?: number | undefined; }' is not assignable to type '{ polar?: boolean | undefined; type?: string | undefined; spacing?: number[] | undefined; margin?: number[] | undefined; style?: CSSObject | undefined; spacingBottom?: number | undefined; spacingLeft?: number | undefined; spacingRight?: number | undefined; spacingTop?: number | undefined; }'.
       events: {
         render() {
+          //$FlowFixMe[object-this-reference]
           const chart = this;
-          // @ts-ignore - TS2551 - Property 'renderTo' does not exist on type '{ render(): void; }'. Did you mean 'render'?
           const containerWidth = chart.renderTo.offsetWidth;
           const desiredHeight = CHART_WIDTH * containerWidth;
           // 5px adjustment required due to borderWidth mostly.
-          const centerTextX = isLegendEnabled
-          // @ts-ignore - TS2339 - Property 'plotWidth' does not exist on type '{ render(): void; }'.
-          ? parseInt(chart.plotWidth) * CHART_CENTER + 5 : 0;
-          // @ts-ignore - TS2339 - Property 'update' does not exist on type '{ render(): void; }'.
+          const centerTextX = isLegendEnabled ? parseInt(chart.plotWidth) * CHART_CENTER + 5 : 0;
           chart.update({
             chart: {
               height: desiredHeight // Set the height dynamically based on the container's width
@@ -88,7 +84,6 @@ const getDonutChartOptions = _ref => {
         borderWidth: 5,
         borderRadius: 10,
         minSize: 240,
-        // @ts-ignore - TS2322 - Type '{ innerSize: string; allowPointSelect: true; cursor: "pointer"; dataLabels: { enabled: boolean; distance: number; }; showInLegend: true; center: [string, string]; size: string; borderWidth: number; borderRadius: number; minSize: number; clip: false; }' is not assignable to type '{ innerSize?: string | undefined; allowPointSelect?: boolean | undefined; cursor?: "pointer" | undefined; dataLabels?: { enabled?: boolean | undefined; distance?: number | undefined; connectorColor?: string | undefined; useHTML?: boolean | undefined; format?: string | undefined; style?: CSSObject | undefined; } | un...'.
         clip: false
       }
     },