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

package/lib/utils/charts/donutChart.ts

@@ -1,123 +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}%`,
-} as const;
-
-/**
- * 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],
-// @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() {
-          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; }'.
-          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,
-// @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,
-      },
-    },
-    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.ts

@@ -1,97 +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,
-    },
-// @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: 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 => ({
-  // @ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
-  series: drilldownSeries.series?.map((series: SeriesOptionsType) => ({
-    ...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: getDataVizColor(index), // Assign a color dynamically based on index
-    })),
-    showInLegend, // Ensure legend is displayed
-  })),
-});

package/lib/utils/charts/helpers.ts

@@ -1,65 +0,0 @@
-import merge from 'lodash/merge';
-
-import {
-  colorTextPrimary,
-  colorTextSecondary,
-} from '../../styles/variables/_color';
-
-import {
-  bodySmall,
-  buttonTextExtraSmall,
-  formLabelSmall,
-  underline,
-} from './typography';
-
-
-export const deepMerge = <T extends Record<any, any>>(
-  obj1: Partial<T> | null | undefined,
-  obj2: Partial<T> | null | undefined,
-  ...args: Array<Partial<T> | null | undefined>
-): 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%',
-} as const;
-
-export const bottomLegendRow = {
-  layout: 'horizontal',
-  align: 'center',
-  verticalAlign: 'bottom',
-  itemDistance: 20,
-  symbolPadding: 4,
-  symbolWidth: 16,
-} as const;
-
-export const yAxisTitleStyle = {
-  ...bodySmall,
-  color: colorTextSecondary,
-} as const;
-
-export const xAxisTitleStyle = {
-  ...bodySmall,
-  color: colorTextSecondary,
-} as const;
-
-export const yAxisLabelStyle = {
-  ...formLabelSmall,
-} as const;
-
-export const xAxisLabelStyle = {
-  ...buttonTextExtraSmall,
-} as const;
-
-export const activeLabelStyle = {
-  ...buttonTextExtraSmall,
-  ...underline,
-  color: colorTextPrimary,
-  fill: colorTextPrimary,
-} as const;

package/lib/utils/charts/index.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.ts

@@ -1,51 +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,
-    },
-// @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: colorBorderPrimary,
-  },
-  yAxis: {
-    labels: {
-      align: 'right',
-      distance: 12,
-      style: yAxisLabelStyle,
-    },
-    title: {
-      margin: 12,
-      style: yAxisTitleStyle,
-    },
-  },
-});

package/lib/utils/charts/spiderChart.ts

@@ -1,57 +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,
-} as const;
-
-/**
- * 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.ts

@@ -1,52 +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',
-} as const;
-
-export const bodySmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  fontWeight: fontWeightBook,
-  letterSpacing: fontLetterSpacing4,
-} as const;
-
-export const formLabelSmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  // Removing the font height as its breaking the chart axis labels
-} as const;
-
-export const buttonTextExtraSmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  letterSpacing: fontLetterSpacing1,
-  // Removing the font height as its breaking the chart axis labels
-} as const;
-
-export const underline = {
-  textDecoration: 'underline',
-} as const;
-
-export const subTitleExtraSmall = {
-  ...baseType,
-  fontSize: fontSize12,
-  letterSpacing: fontLetterSpacing0,
-  // Removing the font height as its breaking the chart axis labels
-} as const;

package/lib/utils/classify/classify.stories.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-import {BodyLarge} from '../../components/Text';
-
-import classify from './';
-
-import css from './classify.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/Classify',
-  component: classify,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import classify from "@spaced-out/ui-design-system/lib/utils/classify";
-\`\`\`
-The \`classify\` utility is a function that takes multiple arguments and returns a string with the concatenated values. It is commonly used to generate CSS class names based on conditional values.
-
-### Usage
-\`\`\`jsx
-import classify from './classify';
-
-const MyComponent = () => {
-  const className = classify(
-    'my-class',
-    { 'conditional-class': true },
-    { 'another-class': false },
-    'extra-class'
-  );
-
-  return (
-    <div className={className}>
-      <BodyLarge>This element has multiple class names</BodyLarge>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-          `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const className = classify(
-    'my-class',
-    {'conditional-class': true},
-    {'another-class': false},
-    'extra-class',
-  );
-
-  return (
-    <div className={className}>
-      <BodyLarge className={css.text}>
-        This element has multiple class names
-      </BodyLarge>
-    </div>
-  );
-};

package/lib/utils/classify/index.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)) {
-// @ts-ignore - TS2769 - No overload matches this call.
-        mappedArg = map(arg, (test, name: string) => (test ? name : null));
-      }
-      return mappedArg;
-    })
-    .reduce<Array<any>>((array, current) => {
-      if (Array.isArray(current)) {
-        array.push(...current);
-      } else {
-        array.push(current);
-      }
-      return array;
-    }, [])
-    .filter((val) => val)
-    .join(' ');
-}
-
-export default classify;