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

package/lib/types/charts.ts

@@ -1,247 +0,0 @@
-export type ChartOptions = {
-  chart?: {
-    polar?: boolean;
-    type?: string;
-// @ts-ignore - TS2300 - Duplicate identifier 'spacing'.
-    spacing?: Array<number>;
-    margin?: Array<number>;
-    style?: CSSObject;
-// @ts-ignore - TS2300 - Duplicate identifier 'spacing'. | TS2717 - Subsequent property declarations must have the same type.  Property 'spacing' must be of type 'number[] | undefined', but here has type '[number, number, number, number] | undefined'.
-    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;
-// @ts-ignore - TS2300 - Duplicate identifier 'legend'.
-  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;
-  };
-// @ts-ignore - TS2300 - Duplicate identifier 'legend'. | TS2717 - Subsequent property declarations must have the same type.  Property 'legend' must be of type 'LegendOptionsType | undefined', but here has type 'Legend | undefined'.
-  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 = Partial<Record<'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;
-// @ts-ignore - TS2300 - Duplicate identifier 'minSize'.
-  minSize?: number | string;
-  borderWidth?: number;
-  borderRadius?: number;
-  neckWidth?: string | number;
-  neckHeight?: string | number;
-// @ts-ignore - TS2300 - Duplicate identifier 'minSize'.
-  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;
-// @ts-ignore - TS2300 - Duplicate identifier 'itemMarginBottom'.
-  itemMarginBottom?: number;
-// @ts-ignore - TS2300 - Duplicate identifier 'itemMarginBottom'.
-  itemMarginBottom?: number;
-// @ts-ignore - TS2300 - Duplicate identifier 'itemMarginBottom'.
-  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.ts

@@ -1,11 +0,0 @@
-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 = typeof ALERT_SEMANTIC[keyof typeof ALERT_SEMANTIC];

package/lib/types/cssvariables.d.ts

@@ -1,8 +0,0 @@
-import 'react';
-
-declare module 'react' {
-  // Augment CSSProperties to allow CSS variables
-  interface CSSProperties {
-    [key: `--${string}`]: string | number;
-  }
-}

package/lib/types/date-range-picker.ts

@@ -1,20 +0,0 @@
-export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
-export type DateRange = {
-  startDate?: string | null | undefined;
-  endDate?: string | null | undefined;
-};
-export type DateRangePickerErrorTypes = {
-  [key: string]: {
-    type: string;
-    description: string;
-  };
-};
-export type DateRangePickerError = {
-  type: string;
-  description: string;
-};
-export type DateRangeWithTimezone = ((DateRange) & {
-  startDateUTC?: string | null | undefined;
-  endDateUTC?: string | null | undefined;
-  timezone?: string;
-});

package/lib/types/flow-to-typescript-codemod.d.ts

@@ -1,48 +0,0 @@
-declare module 'flow-to-typescript-codemod' {
-  export declare namespace Flow {
-    // Abstract Component utility type
-    // https://flow.org/en/docs/react/types/#toc-react-abstractcomponent
-    type AbstractComponent<Config, Instance = any> = React.ComponentType<
-      React.PropsWithoutRef<Config> & React.RefAttributes<Instance>
-    >;
-
-    // Class utility type
-    // https://flow.org/en/docs/types/utilities/#toc-class
-    // https://github.com/piotrwitek/utility-types/blob/df2502ef504c4ba8bd9de81a45baef112b7921d0/src/utility-types.ts#L158
-    type Class<T> = new (...args: any[]) => T;
-
-    // $Diff utility type
-    // https://flow.org/en/docs/types/utilities/#toc-diff
-    // https://github.com/piotrwitek/utility-types/blob/df2502ef504c4ba8bd9de81a45baef112b7921d0/src/utility-types.ts#L50
-    type Diff<T extends U, U extends object> = Pick<
-      T,
-      SetComplement<keyof T, keyof U>
-    >;
-
-    type ComponentProps<T> = T extends
-      | React.ComponentType<infer P>
-      | React.Component<infer P>
-      ? React.ComponentProps<T>
-      : HasComponentProps<T>;
-
-    type ObjMap<
-      O extends Record<string, any>,
-      F extends (...args: any[]) => any
-    > = { [P in keyof O]: ReturnType<F> };
-  }
-
-  // Helper types
-  type SetComplement<A, B extends A> = A extends B ? never : A;
-
-  type DefaultProps<T> = T extends { defaultProps: infer D } ? D : {};
-
-  type OmitDefaultProps<T, D> = Omit<T, keyof D> &
-    Partial<Pick<T, Extract<keyof T, keyof D>>> &
-    Partial<Pick<D, Extract<keyof D, keyof T>>>;
-
-  type HasComponentProps<T, D extends unknown = DefaultProps<T>> = T extends (
-    prop: infer P
-  ) => React.ReactElement
-    ? OmitDefaultProps<P, D>
-    : never;
-}

package/lib/types/global.d.ts

@@ -1,84 +0,0 @@
-// TypeScript declarations to replace Flow stubs
-
-// CSS Modules
-declare module '*.css' {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-declare module '*.module.css' {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-
-// File imports (images, audio, etc.)
-declare module '*.png' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpeg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.gif' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.mp3' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.wav' {
-  const content: string;
-  export default content;
-}
-
-// SVG imports
-declare module '*.svg' {
-  import React from 'react';
-
-  interface SVGProps {
-    className?: string;
-    style?: React.CSSProperties;
-    width?: number;
-    height?: number;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  }
-
-  const SVGComponent: React.FC<SVGProps>;
-  export default SVGComponent;
-}
-
-declare module '*.svg?noDimensions' {
-  import React from 'react';
-
-  interface SVGProps {
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  }
-
-  const SVGComponent: React.FC<SVGProps>;
-  export default SVGComponent;
-}
-
-declare module '*.svg?noAttrs' {
-  import React from 'react';
-
-  const SVGComponent: React.FC;
-  export default SVGComponent;
-}
-
-
-
-

package/lib/types/index.ts

@@ -1,6 +0,0 @@
-export * from './charts';
-export * from './common';
-export * from './date-range-picker';
-export * from './menu';
-export * from './toast';
-export * from './typography';

package/lib/types/menu.ts

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

@@ -1,34 +0,0 @@
-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',
-} as const;
-
-export const ACTIONS = {
-  ADD: 'ADD',
-  REMOVE: 'REMOVE',
-} as const;
-
-export type positionTypes = typeof POSITIONS[keyof typeof POSITIONS];
-export type actionTypes = typeof ACTIONS[keyof typeof ACTIONS];
-export type contentTypes = React.ReactNode;
-
-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.ts

@@ -1,17 +0,0 @@
-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 = typeof TEXT_COLORS[keyof typeof TEXT_COLORS];

package/lib/utils/array/are-arrays-equal.ts

@@ -1,12 +0,0 @@
-type ItemComparer<Item> = (a: Item, b: Item) => boolean;
-
-export function areArraysEqual<Item>(
-  array1: Item[],
-  array2: Item[],
-  itemComparer: ItemComparer<Item> = (a: Item, b: Item) => a === b,
-): boolean {
-  return (
-    array1.length === array2.length &&
-    array1.every((value, index) => itemComparer(value, array2[index]))
-  );
-}

package/lib/utils/array/index.ts

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

package/lib/utils/charts/charts.ts

@@ -1,110 +0,0 @@
-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,
-] as const;
-
-export const getDataVizColor = (dataIndex: number): string => {
-  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
-  return DATA_VIZ_COLORS[colorIndex];
-};
-
-export const breadcrumbStyle = {
-  ...subTitleExtraSmall,
-  color: colorTextSecondary,
-} as const;
-
-export const commonChartOptions: Partial<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,
-// @ts-ignore - TS2322 - Type '{ floating: true; style: { readonly color: "#565656"; readonly fontSize: "12px"; readonly letterSpacing: "0em"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; buttonTheme: { ...; }; }' is not assignable to type 'BreadcrumbsOptions'.
-      buttonTheme: {
-        style: breadcrumbStyle,
-      },
-    },
-  },
-  legend: {
-// @ts-ignore - TS2322 - Type '{ paddingTop: string; fontSize: "12px"; fontFamily: "Centra No 2"; fontStyle: "normal"; margin: 0; color: "#17172A"; letterSpacing: "0em"; fontWeight: "500"; display: "flex"; alignItems: "center"; }' is not assignable to type 'CSSObject'.
-    itemStyle: {...formLabelSmall, paddingTop: '1px'},
-    symbolHeight: 8,
-    enabled: true,
-  },
-  xAxis: {
-    type: 'category',
-// @ts-ignore - TS2322 - Type '{ type: string; padding: number; }' is not assignable to type 'AxisOptions'.
-    padding: 0,
-  },
-  navigation: {
-    breadcrumbs: {
-      buttonTheme: {
-        style: {
-          color: colorFillInversePrimary,
-        },
-      },
-// @ts-ignore - TS2322 - Type '{ buttonTheme: { style: { color: string; }; }; separator: { text: string; }; }' is not assignable to type 'Breadcrumbs'.
-      separator: {
-        text: '>',
-      },
-    },
-  },
-};
-
-export const mergeChartUserOptions = (defaultoptions: ChartOptions, userOptions: ChartOptions): ChartOptions => deepMerge(defaultoptions, userOptions);

package/lib/utils/charts/columnChart.ts

@@ -1,62 +0,0 @@
-import {colorBorderPrimary} from '../../styles/variables/_color';
-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,
-    },
-// @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly letterSpacing: "0.01em"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string |...' is not assignable to type 'AxisOptions'.
-    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;