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

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

@@ -1,102 +0,0 @@
-// @flow strict
-import type {FunnelSeriesItem} from '../../components/Charts/FunnelChart/FunnelChart.js';
-import {colorBorderPrimary} from '../../styles/variables/_color.js';
-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.js.flow

@@ -1,68 +0,0 @@
-// @flow strict
-
-import merge from 'lodash/merge';
-
-import {
-  colorTextPrimary,
-  colorTextSecondary,
-} from '../../styles/variables/_color';
-
-import {
-  bodySmall,
-  buttonTextExtraSmall,
-  formLabelSmall,
-  underline,
-} from './typography';
-
-
-export const deepMerge = <T: {}>(
-  obj1?: $Shape<T>,
-  obj2?: $Shape<T>,
-  ...args: Array<?$Shape<T>>
-): T =>
-  // {} is used here to ensure obj1 is not modified
-    merge({}, obj1, obj2, ...args);
-
-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.js.flow

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

@@ -1,51 +0,0 @@
-// @flow strict
-import {colorBorderPrimary} from '../../styles/variables/_color.js';
-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.js.flow

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

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

@@ -1,29 +0,0 @@
-// @flow strict
-
-import isPlainObject from 'lodash/isPlainObject';
-import map from 'lodash/map';
-
-
-export function classify(...args: Array<mixed>): 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.js.flow

@@ -1,228 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import invariant from 'invariant';
-
-import {pageHeight} from '../dom';
-
-
-type BoundaryRefType<T> = {
-  current: ?T,
-};
-
-type TriggerRefType<T> = {
-  current: ?T,
-};
-
-export type ChildProps = {
-  onOpen: () => void,
-  isOpen: boolean,
-  height: ?number,
-  pageBottom: ?number,
-  clickAway: () => void,
-  boundaryRef: BoundaryRefType<?HTMLElement>,
-  triggerRef: TriggerRefType<?HTMLElement>,
-};
-
-export type ClickAwayRefType = ?{
-  current: ?{
-    forceClose: () => void,
-    forceOpen: () => void,
-  },
-};
-
-export type ClickAwayProps = {
-  closeOnEscapeKeypress?: boolean,
-  children: (props: ChildProps) => React.Node,
-  onChange?: (isOpen: boolean) => mixed,
-  clickAwayRef?: ClickAwayRefType,
-  /**
-   * When containsNestedFloatingPortals is true, prevents ClickAway from closing the dropdown if the click target
-   * is inside a floating portal root element.
-   *
-   * This is necessary for nested dropdowns rendered using floating portals,
-   * such as via `@floating-ui/react`. Floating portals render elements outside
-   * the normal DOM tree (often directly into `document.body` or another container)
-   * using `ReactDOM.createPortal`. As a result, these nested dropdowns do not
-   * appear inside the parent dropdown's `boundaryRef` or `triggerRef` subtree.
-   *
-   * To address this, the floating portal ensures that all nested dropdowns
-   * are mounted into a **shared root element** — effectively maintaining a
-   * common DOM ancestry. This allows parent dropdowns to detect when clicks
-   * occur within any of their nested children, even if rendered via portals.
-   * The shared root element is the closest parent element that has a `data-floating-ui-portal` attribute.
-   * Because of this, the ClickAway logic will not close the parent menu if the click target is inside boundaryRef's parentElement.
-   *
-   * Enabling `containsNestedFloatingPortals` allows the ClickAway logic to account
-   * for this shared root and avoids incorrectly closing the parent menu when
-   * interacting with nested dropdowns.
-   */
-  containsNestedFloatingPortals?: boolean,
-};
-
-type ClickAwayState = {
-  isOpen: boolean,
-  height: ?number,
-  pageBottom: ?number,
-};
-
-// TODO(Nishant): Make this a functional component
-
-export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
-  static defaultProps: {
-    containsNestedFloatingPortals?: boolean,
-    closeOnEscapeKeypress?: boolean,
-  } = {
-      containsNestedFloatingPortals: false,
-      closeOnEscapeKeypress: true,
-    };
-
-  state: ClickAwayState = {
-    isOpen: false,
-    height: null,
-    pageBottom: null,
-  };
-
-  el: ?HTMLElement = null;
-  boundaryRef: BoundaryRefType<?HTMLElement> = React.createRef();
-  triggerRef: TriggerRefType<?HTMLElement> = 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.Node {
-    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.props.containsNestedFloatingPortals &&
-      this.boundaryRef.current?.parentElement &&
-      (this.boundaryRef.current.parentElement === evt.target ||
-        this.boundaryRef.current.parentElement.contains(evt.target))
-    ) {
-      return;
-    }
-
-    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?: SyntheticKeyboardEvent<EventTarget>,
-  ) => void = (evt?: SyntheticKeyboardEvent<EventTarget>) => {
-      if (evt?.key === 'Escape') {
-        this.forceClose();
-      }
-    };
-
-  forceClose: () => void = () => {
-    this.setState({isOpen: false}, this.handleOnChange);
-  };
-
-  handleOnChange: () => mixed = () =>
-    this.props.onChange && this.props.onChange(this.state.isOpen);
-
-  pageBottom(): $FlowFixMe {
-    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.js.flow

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