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

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

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

package/lib/utils/charts/funnelChart.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFunnelChartOptions = exports.addColorsToFunnelSeries = exports.addColorsToFunnelDrilldownSeries = void 0;
-var _color = require("../../styles/variables/_color");
+var _color = require("../../styles/variables/_color.js");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 var _typography = require("./typography");
@@ -12,7 +12,6 @@ var _typography = require("./typography");
  * This function modifies the the common chart behavior to funnel chart default behavior.
  * It will not take userPassed option into account.
  */
-
 const getFunnelChartOptions = () => ({
   ..._charts.commonChartOptions,
   chart: {
@@ -32,7 +31,6 @@ const getFunnelChartOptions = () => ({
       margin: 12,
       style: _helpers.xAxisTitleStyle
     },
-    // @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly letterSpacing: "0em"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string | un...' is not assignable to type 'AxisOptions'.
     lineColor: _color.colorBorderPrimary
   },
   yAxis: {
@@ -83,10 +81,8 @@ exports.addColorsToFunnelSeries = addColorsToFunnelSeries;
 const addColorsToFunnelDrilldownSeries = function (drilldownSeries) {
   let showInLegend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return {
-    // @ts-ignore - TS7006 - Parameter 'series' implicitly has an 'any' type.
     series: drilldownSeries.series?.map(series => ({
       ...series,
-      // @ts-ignore - TS7006 - Parameter 'dataPoint' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
       data: series.data.map((dataPoint, index) => ({
         ...dataPoint,
         color: (0, _charts.getDataVizColor)(index) // Assign a color dynamically based on index

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

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

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

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

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

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

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

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

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

@@ -15,7 +15,7 @@ function classify() {
   return args.map(arg => {
     let mappedArg = arg;
     if ((0, _isPlainObject.default)(arg)) {
-      // @ts-ignore - TS2769 - No overload matches this call.
+      // $FlowFixMe[incompatible-call]
       mappedArg = (0, _map.default)(arg, (test, name) => test ? name : null);
     }
     return mappedArg;

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

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

@@ -10,7 +10,6 @@ var _dom = require("../dom");
 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); }
 // TODO(Nishant): Make this a functional component
-
 class ClickAway extends React.Component {
   static defaultProps = {
     containsNestedFloatingPortals: false,
@@ -32,8 +31,6 @@ class ClickAway extends React.Component {
       });
     }
   }
-
-  // @ts-ignore - TS6133 - 'prevProps' is declared but its value is never read.
   componentDidUpdate(prevProps, prevState) {
     const {
       isOpen
@@ -44,17 +41,13 @@ class ClickAway extends React.Component {
           capture: true
         });
         if (this.props.closeOnEscapeKeypress) {
-          window.document.addEventListener('keyup',
-          // @ts-ignore - TS2769 - No overload matches this call.
-          this.handleCloseOnEscapeKeypress);
+          window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
         }
       } else {
         window.document.removeEventListener('click', this.handleCloseClick, {
           capture: true
         });
-        window.document.removeEventListener('keyup',
-        // @ts-ignore - TS2769 - No overload matches this call.
-        this.handleCloseOnEscapeKeypress);
+        window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
@@ -62,9 +55,7 @@ class ClickAway extends React.Component {
     window.document.removeEventListener('click', this.handleCloseClick, {
       capture: true
     });
-    window.document.removeEventListener('keyup',
-    // @ts-ignore - TS2769 - No overload matches this call.
-    this.handleCloseOnEscapeKeypress);
+    window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
     const {
@@ -109,14 +100,10 @@ class ClickAway extends React.Component {
     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 && (
-    // @ts-ignore - TS2367 - This condition will always return 'false' since the types 'BoundaryRefType<HTMLElement | null | undefined>' and 'Node' have no overlap.
-    this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
+    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 && (
-    // @ts-ignore - TS2367 - This condition will always return 'false' since the types 'TriggerRefType<HTMLElement | null | undefined>' and 'Node' have no overlap.
-    this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
+    if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
       return;
     }
     this.setState({