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

package/lib/types/charts.js.flow

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,119 +0,0 @@
-// @flow strict
-
-import type {ChartOptions, LegendOptionsType} from '../../types/charts';
-
-import {commonChartOptions} from './charts';
-import {deepMerge} from './helpers';
-
-
-type DonutChartPropsType = {
-  legend?: LegendOptionsType,
-  defaultCenterHTML?: string,
-};
-
-/**
- * Defining these constants here so that internal calculations are self explanatory.
- */
-const INNER_SIZE = 0.5; // set .5 here for 50% inner size w.r.t the pie chart outer circle.
-const LEGEND_WIDTH = 0.4; // set .4 here for 40% legend width w.r.t the plot width.
-const CHART_WIDTH = 1 - LEGEND_WIDTH;
-const CHART_CENTER = (1 - LEGEND_WIDTH) / 2;
-const CHART_SIZE = 0.8; // chart size w.r.t area allocated to chart drawing;
-
-export const rightLegendColumn = {
-  layout: 'vertical',
-  align: 'right',
-  verticalAlign: 'middle',
-  itemMarginBottom: 12,
-  symbolPadding: 8,
-  symbolWidth: 8,
-  // take it as 10% of width as left margin
-  width: `${LEGEND_WIDTH * 90}%`,
-};
-
-/**
- * This function modifies the the common chart behavior to donut chart default behavior.
- * It will not take userPassed option into account.
- */
-
-export const getDonutChartOptions = ({
-  legend,
-  defaultCenterHTML,
-}: DonutChartPropsType): ChartOptions => {
-  const legendOption = deepMerge(commonChartOptions.legend, legend);
-  const isLegendEnabled = legendOption.enabled;
-  return {
-    ...commonChartOptions,
-    chart: {
-      ...commonChartOptions.chart,
-      type: 'pie',
-      spacing: [0, 0, 0, 0],
-      margin: [0, 0, 0, 0],
-      events: {
-        render() {
-          //$FlowFixMe[object-this-reference]
-          const chart = this;
-          const containerWidth = chart.renderTo.offsetWidth;
-          const desiredHeight = CHART_WIDTH * containerWidth;
-          // 5px adjustment required due to borderWidth mostly.
-          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
-              },
-              subtitle: {
-                x: centerTextX,
-              },
-            },
-            false,
-          );
-        },
-      },
-    },
-    legend: {
-      ...legendOption,
-      ...rightLegendColumn,
-    },
-    plotOptions: {
-      pie: {
-        innerSize: `${INNER_SIZE * 100}%`,
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-          // auto disabling the data label when legend is enabled.
-          enabled: !isLegendEnabled,
-          distance: 20,
-        },
-        showInLegend: true,
-        center: isLegendEnabled
-          ? [`${CHART_CENTER * 100}%`, '50%']
-          : ['50%', '50%'],
-        size: `${CHART_SIZE * 100}%`,
-        borderWidth: 5,
-        borderRadius: 10,
-        minSize: 240,
-        clip: false,
-      },
-    },
-    subtitle: {
-      useHTML: true,
-      text: defaultCenterHTML,
-      verticalAlign: 'middle',
-      align: isLegendEnabled ? 'left' : 'center',
-      style: {
-        alignContent: 'center',
-        // Note: Width was not working, have given miWidth and maxWidth
-        minWidth: isLegendEnabled
-          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
-          : `${CHART_SIZE * INNER_SIZE * 80}%`,
-        maxWidth: isLegendEnabled
-          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
-          : `${CHART_SIZE * INNER_SIZE * 80}%`,
-        ...(isLegendEnabled ? {transform: 'translate(-50%)'} : {}),
-      },
-    },
-  };
-};