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

package/lib/utils/charts/donutChart.d.ts

@@ -1,116 +0,0 @@
-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%)',
-            }
-          : {}),
-      },
-    },
-  };
-};

package/lib/utils/charts/funnelChart.d.ts

@@ -1,94 +0,0 @@
-import type {FunnelSeriesItem} from '../../components/Charts/FunnelChart/FunnelChart';
-import {colorBorderPrimary} from '../../styles/variables/_color';
-import type {
-  ChartOptions,
-  DataOptionsType,
-  Drilldown,
-} from '../../types/charts';
-import {commonChartOptions, getDataVizColor} from './charts';
-import {
-  bottomLegendRow,
-  xAxisTitleStyle,
-  yAxisLabelStyle,
-  yAxisTitleStyle,
-} from './helpers';
-import {formLabelSmall} from './typography';
-
-/**
- * This function modifies the the common chart behavior to funnel chart default behavior.
- * It will not take userPassed option into account.
- */
-export const getFunnelChartOptions = (): ChartOptions => ({
-  ...commonChartOptions,
-  chart: {
-    type: 'funnel',
-  },
-  legend: {...commonChartOptions.legend, ...bottomLegendRow, symbolWidth: 18},
-  xAxis: {
-    ...commonChartOptions.xAxis,
-    labels: {
-      style: formLabelSmall,
-    },
-    title: {
-      margin: 12,
-      style: xAxisTitleStyle,
-    },
-    lineColor: colorBorderPrimary,
-  },
-  yAxis: {
-    labels: {
-      align: 'right',
-      distance: 12,
-      style: yAxisLabelStyle,
-    },
-    title: {
-      margin: 12,
-      style: yAxisTitleStyle,
-    },
-  },
-  plotOptions: {
-    funnel: {
-      neckWidth: '15%',
-      neckHeight: '10%',
-      minSize: '50%',
-      width: '55%',
-      dataLabels: {
-        enabled: true,
-        useHTML: true,
-        // Allows custom HTML formatting
-        format: `<div style="text-align: center">
-          <span>{point.name}</span><br>
-          <span>{point.y}</span>
-          </div>`,
-        style: {
-          fontWeight: 'bold',
-        },
-      },
-    },
-  },
-});
-export const addColorsToFunnelSeries = (
-  series: Array<FunnelSeriesItem>,
-  showInLegend: boolean = true,
-): Array<FunnelSeriesItem> =>
-  series.map((item: FunnelSeriesItem) => ({
-    ...item,
-    data: item.data.map((seriesItem: DataOptionsType, index: number) => ({
-      ...seriesItem,
-      color: getDataVizColor(index), // Apply color based on index
-    })),
-    showInLegend, // Ensure legend visibility
-  }));
-export const addColorsToFunnelDrilldownSeries = (
-  drilldownSeries: Drilldown,
-  showInLegend: boolean = true,
-): Drilldown => ({
-  series: drilldownSeries.series?.map((series) => ({
-    ...series,
-    data: series.data.map((dataPoint, index) => ({
-      ...dataPoint,
-      color: getDataVizColor(index), // Assign a color dynamically based on index
-    })),
-    showInLegend, // Ensure legend is displayed
-  })),
-});

package/lib/utils/charts/helpers.d.ts

@@ -1,44 +0,0 @@
-import {$Shape} from 'utility-types';
-import merge from 'lodash/merge';
-import {
-  colorTextPrimary,
-  colorTextSecondary,
-} from '../../styles/variables/_color';
-import {
-  bodySmall,
-  buttonTextExtraSmall,
-  formLabelSmall,
-  underline,
-} from './typography';
-export const deepMerge = <T extends {}>(
-  obj1?: $Shape<T>,
-  obj2?: $Shape<T>,
-  ...args: Array<$Shape<T> | null | undefined>
-): T => merge({}, obj1, obj2, ...args); // {} is used here to ensure obj1 is not modified
-export const rightLineLegendColumn = {
-  layout: 'vertical',
-  align: 'right',
-  verticalAlign: 'middle',
-  itemMarginBottom: 12,
-  symbolPadding: 4,
-  symbolWidth: 16,
-  width: '40%',
-};
-export const bottomLegendRow = {
-  layout: 'horizontal',
-  align: 'center',
-  verticalAlign: 'bottom',
-  itemDistance: 20,
-  symbolPadding: 4,
-  symbolWidth: 16,
-};
-export const yAxisTitleStyle = {...bodySmall, color: colorTextSecondary};
-export const xAxisTitleStyle = {...bodySmall, color: colorTextSecondary};
-export const yAxisLabelStyle = {...formLabelSmall};
-export const xAxisLabelStyle = {...buttonTextExtraSmall};
-export const activeLabelStyle = {
-  ...buttonTextExtraSmall,
-  ...underline,
-  color: colorTextPrimary,
-  fill: colorTextPrimary,
-};

package/lib/utils/charts/index.d.ts

@@ -1,7 +0,0 @@
-export * from './charts';
-export * from './columnChart';
-export * from './donutChart';
-export * from './helpers';
-export * from './lineChart';
-export * from './spiderChart';
-export * from './typography';

package/lib/utils/charts/lineChart.d.ts

@@ -1,44 +0,0 @@
-import {colorBorderPrimary} from '../../styles/variables/_color';
-import type {ChartOptions} from '../../types/charts';
-import {commonChartOptions} from './charts';
-import {
-  bottomLegendRow,
-  xAxisTitleStyle,
-  yAxisLabelStyle,
-  yAxisTitleStyle,
-} from './helpers';
-import {formLabelSmall} from './typography';
-
-/**
- * This function modifies the the common chart behavior to line chart default behavior.
- * It will not take userPassed option into account.
- */
-export const getLineChartOptions = (): ChartOptions => ({
-  ...commonChartOptions,
-  chart: {
-    type: 'line',
-  },
-  legend: {...commonChartOptions.legend, ...bottomLegendRow, symbolWidth: 18},
-  xAxis: {
-    ...commonChartOptions.xAxis,
-    labels: {
-      style: formLabelSmall,
-    },
-    title: {
-      margin: 12,
-      style: xAxisTitleStyle,
-    },
-    lineColor: colorBorderPrimary,
-  },
-  yAxis: {
-    labels: {
-      align: 'right',
-      distance: 12,
-      style: yAxisLabelStyle,
-    },
-    title: {
-      margin: 12,
-      style: yAxisTitleStyle,
-    },
-  },
-});

package/lib/utils/charts/spiderChart.d.ts

@@ -1,46 +0,0 @@
-import {colorTextSecondary} from '../../styles/variables/_color';
-import type {ChartOptions} from '../../types/charts';
-import {commonChartOptions} from './charts';
-import {rightLineLegendColumn} from './helpers';
-import {bodySmall} from './typography';
-export const bodySmallSecondary = {...bodySmall, color: colorTextSecondary};
-
-/**
- * This function modifies the the common chart behavior to spider chart default behavior.
- * It will not take userPassed option into account.
- */
-export const getSpiderChartOptions = (): ChartOptions => ({
-  ...commonChartOptions,
-  chart: {
-    ...commonChartOptions.chart,
-    polar: true,
-    type: 'line',
-    spacing: [0, 0, 0, 0],
-    margin: [0, 0, 0, 0],
-  },
-  xAxis: {
-    ...commonChartOptions.xAxis,
-    labels: {
-      style: bodySmallSecondary,
-    },
-    lineWidth: 0,
-    tickmarkPlacement: 'on',
-  },
-  yAxis: {
-    labels: {
-      style: bodySmallSecondary,
-    },
-    gridLineInterpolation: 'polygon',
-    lineWidth: 0,
-  },
-  legend: {
-    ...commonChartOptions.legend,
-    ...rightLineLegendColumn,
-    symbolWidth: 18,
-  },
-  pane: {
-    center: ['30%', '50%'],
-    size: '70%',
-  },
-  tooltip: {...commonChartOptions.tooltip, followPointer: false, shared: true},
-});

package/lib/utils/charts/typography.d.ts

@@ -1,42 +0,0 @@
-import {colorTextPrimary} from '../../styles/variables/_color';
-import {
-  fontLetterSpacing0,
-  fontLetterSpacing1,
-  fontLetterSpacing4,
-  fontSize12,
-  fontWeightBook,
-  fontWeightMedium,
-} from '../../styles/variables/_font';
-export const baseType = {
-  fontFamily: 'Centra No 2',
-  fontStyle: 'normal',
-  margin: 0,
-  color: colorTextPrimary,
-  letterSpacing: fontLetterSpacing0,
-  fontWeight: fontWeightMedium,
-  display: 'flex',
-  alignItems: 'center',
-};
-export const bodySmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  fontWeight: fontWeightBook,
-  letterSpacing: fontLetterSpacing4,
-};
-export const formLabelSmall = {
-  ...baseType,
-  fontSize: fontSize12, // Removing the font height as its breaking the chart axis labels
-};
-export const buttonTextExtraSmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  letterSpacing: fontLetterSpacing1, // Removing the font height as its breaking the chart axis labels
-};
-export const underline = {
-  textDecoration: 'underline',
-};
-export const subTitleExtraSmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  letterSpacing: fontLetterSpacing0, // Removing the font height as its breaking the chart axis labels
-};

package/lib/utils/classify/index.d.ts

@@ -1,27 +0,0 @@
-import isPlainObject from 'lodash/isPlainObject';
-import map from 'lodash/map';
-export function classify(...args: Array<unknown>): string {
-  return args
-    .map((arg) => {
-      let mappedArg = arg;
-
-      if (isPlainObject(arg)) {
-        // $FlowFixMe[incompatible-call]
-        mappedArg = map(arg, (test, name: string) => (test ? name : null));
-      }
-
-      return mappedArg;
-    })
-    .reduce((array, current) => {
-      if (Array.isArray(current)) {
-        array.push(...current);
-      } else {
-        array.push(current);
-      }
-
-      return array;
-    }, [])
-    .filter((val) => val)
-    .join(' ');
-}
-export default classify;

package/lib/utils/click-away/click-away.d.ts

@@ -1,194 +0,0 @@
-import * as React from 'react';
-import invariant from 'invariant';
-import {pageHeight} from '../dom';
-type BoundaryRefType<T> = {
-  current: T | null | undefined;
-};
-type TriggerRefType<T> = {
-  current: T | null | undefined;
-};
-export type ChildProps = {
-  onOpen: () => void;
-  isOpen: boolean;
-  height: number | null | undefined;
-  pageBottom: number | null | undefined;
-  clickAway: () => void;
-  boundaryRef: BoundaryRefType<HTMLElement | null | undefined>;
-  triggerRef: TriggerRefType<HTMLElement | null | undefined>;
-};
-export type ClickAwayRefType =
-  | {
-      current:
-        | {
-            forceClose: () => void;
-            forceOpen: () => void;
-          }
-        | null
-        | undefined;
-    }
-  | null
-  | undefined;
-export type ClickAwayProps = {
-  closeOnEscapeKeypress?: boolean;
-  children: (props: ChildProps) => React.ReactNode;
-  onChange?: (isOpen: boolean) => unknown;
-  clickAwayRef?: ClickAwayRefType;
-};
-type ClickAwayState = {
-  isOpen: boolean;
-  height: number | null | undefined;
-  pageBottom: number | null | undefined;
-};
-// TODO(Nishant): Make this a functional component
-export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
-  static defaultProps: {
-    closeOnEscapeKeypress?: boolean;
-  } = {
-    closeOnEscapeKeypress: true,
-  };
-  state: ClickAwayState = {
-    isOpen: false,
-    height: null,
-    pageBottom: null,
-  };
-  el: HTMLElement | null | undefined = null;
-  boundaryRef: BoundaryRefType<HTMLElement | null | undefined> =
-    React.createRef();
-  triggerRef: TriggerRefType<HTMLElement | null | undefined> =
-    React.createRef();
-
-  componentDidMount() {
-    if (this.el) {
-      this.setState({
-        height: this.el.offsetHeight,
-        pageBottom: this.pageBottom(),
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps: ClickAwayProps, prevState: ClickAwayState) {
-    const {isOpen} = this.state;
-
-    if (prevState.isOpen !== isOpen) {
-      if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
-
-        if (this.props.closeOnEscapeKeypress) {
-          window.document.addEventListener(
-            'keyup',
-            this.handleCloseOnEscapeKeypress,
-          );
-        }
-      } else {
-        window.document.removeEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
-        window.document.removeEventListener(
-          'keyup',
-          this.handleCloseOnEscapeKeypress,
-        );
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick, {
-      capture: true,
-    });
-    window.document.removeEventListener(
-      'keyup',
-      this.handleCloseOnEscapeKeypress,
-    );
-  }
-
-  render(): React.ReactNode {
-    const {height, isOpen, pageBottom} = this.state;
-    const {clickAwayRef} = this.props;
-
-    if (clickAwayRef) {
-      clickAwayRef.current = {
-        forceClose: this.forceClose,
-        forceOpen: this.handleOpenClick,
-      };
-    }
-
-    return this.props.children({
-      onOpen: this.handleOpenClick,
-      isOpen,
-      height,
-      pageBottom,
-      clickAway: this.forceClose,
-      boundaryRef: this.boundaryRef,
-      triggerRef: this.triggerRef,
-    });
-  }
-
-  handleOpenClick: () => void = () => {
-    // NOTE (kyle): we recalculate the position on click because sibling and niece components
-    // could have changed.
-    let {pageBottom} = this.state;
-
-    if (this.el) {
-      pageBottom = this.pageBottom();
-    }
-
-    this.setState(
-      {
-        isOpen: !this.state.isOpen,
-        pageBottom,
-      },
-      this.handleOnChange,
-    );
-  };
-  handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
-    if (
-      evt.target instanceof Node &&
-      this.boundaryRef &&
-      (this.boundaryRef === evt.target ||
-        this.boundaryRef.current?.contains(evt.target))
-    ) {
-      return;
-    }
-
-    if (
-      evt.target instanceof Node &&
-      this.triggerRef &&
-      (this.triggerRef === evt.target ||
-        this.triggerRef.current?.contains(evt.target))
-    ) {
-      return;
-    }
-
-    this.setState(
-      {
-        isOpen: false,
-      },
-      this.handleOnChange,
-    );
-  };
-  handleCloseOnEscapeKeypress: (
-    evt?: React.KeyboardEvent<EventTarget>,
-  ) => void = (evt?: React.KeyboardEvent<EventTarget>) => {
-    if (evt?.key === 'Escape') {
-      this.forceClose();
-    }
-  };
-  forceClose: () => void = () => {
-    this.setState(
-      {
-        isOpen: false,
-      },
-      this.handleOnChange,
-    );
-  };
-  handleOnChange: () => unknown = () =>
-    this.props.onChange && this.props.onChange(this.state.isOpen);
-
-  pageBottom(): any {
-    invariant(this.el, 'pageBottom() requires that this.el not be null');
-    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
-    return pageHeight() - bottomBound + window.scrollY;
-  }
-}

package/lib/utils/click-away/index.d.ts

@@ -1 +0,0 @@
-export * from './click-away';