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

package/lib/utils/dom/dom.d.ts

@@ -1,245 +0,0 @@
-import {$Shape} from 'utility-types';
-export type Placement = 'top' | 'left' | 'right' | 'bottom';
-export type ArrowPosition = 'start' | 'center' | 'end';
-export type Justify = ArrowPosition;
-export type PositionedPlacement = {
-  placement: Placement;
-  x: number;
-  y: number;
-};
-export function createElement(
-  document: Document,
-  type: string,
-  props: Record<string, unknown>,
-): HTMLElement {
-  const el = document.createElement(type);
-  return Object.assign(el, props);
-}
-export function pageHeight(): number {
-  const {body, documentElement} = window.document;
-  return Math.max(
-    body.scrollHeight,
-    body.clientHeight,
-    documentElement.scrollHeight,
-    documentElement.clientHeight,
-  );
-}
-export function getFixedAnchorPosition(
-  element: HTMLElement,
-  placement: Placement = 'top',
-  pad: number = 0,
-  justify: Justify = 'center',
-): PositionedPlacement {
-  const rect = element.getBoundingClientRect();
-  const docX = rect.left;
-  const docY = rect.top;
-  let x, y;
-
-  switch (placement) {
-    case 'bottom':
-      y = docY + rect.height + pad;
-
-      switch (justify) {
-        case 'start':
-          x = docX;
-          break;
-
-        case 'center':
-          x = docX + rect.width / 2;
-          break;
-
-        case 'end':
-        default:
-          x = docX + rect.width;
-          break;
-      }
-
-      break;
-
-    case 'left':
-      x = docX - pad;
-
-      switch (justify) {
-        case 'start':
-          y = docY;
-          break;
-
-        case 'center':
-          y = docY + rect.height / 2;
-          break;
-
-        case 'end':
-        default:
-          y = docY + rect.height;
-          break;
-      }
-
-      break;
-
-    case 'right':
-      x = docX + rect.width + pad;
-      y = docY + rect.height / 2;
-      break;
-
-    default:
-      y = docY - pad;
-
-      switch (justify) {
-        case 'start':
-          x = docX;
-          break;
-
-        case 'center':
-          x = docX + rect.width / 2;
-          break;
-
-        case 'end':
-        default:
-          x = docX + rect.width;
-          break;
-      }
-
-      break;
-  }
-
-  return {
-    x,
-    y,
-    placement,
-  };
-}
-export function getAnchorPosition(
-  element: HTMLElement,
-  placement: Placement = 'top',
-  pad: number = 0,
-  justify: Justify = 'center',
-): PositionedPlacement {
-  const position = getFixedAnchorPosition(element, placement, pad, justify);
-  const documentStyle = window.document.documentElement.style;
-  return {
-    ...position,
-    x: position.x + window.pageXOffset - pxToNumber(documentStyle.paddingLeft),
-    y: position.y + window.pageYOffset - pxToNumber(documentStyle.paddingTop),
-  };
-}
-export function pxToNumber(px: string): number {
-  return parseFloat(px.replace('px', '') || '0');
-}
-// TODO (kyle): add more handler types?
-type Handlers = $Shape<{
-  click: (arg0: MouseEvent) => unknown;
-  mousedown: (arg0: MouseEvent) => unknown;
-  mouseup: (arg0: MouseEvent) => unknown;
-  pointerdown: (arg0: PointerEvent) => unknown;
-  pointerup: (arg0: PointerEvent) => unknown;
-  pointercancel: (arg0: PointerEvent) => unknown;
-  [key: string]: (arg0: Event) => unknown;
-}>;
-export function listen(
-  target: EventTarget,
-  handlers: Handlers,
-  options?: EventListenerOptionsOrUseCapture,
-  hook: 'addEventListener' | 'removeEventListener' = 'addEventListener',
-) {
-  for (const eventName in handlers) {
-    // $FlowFixMe indexing valid EventTarget properties
-    target[hook](eventName, handlers[eventName], options);
-  }
-}
-export function forget(
-  target: EventTarget,
-  events: Handlers,
-  options: EventListenerOptionsOrUseCapture,
-): void {
-  return listen(target, events, options, 'removeEventListener');
-}
-type MixedEvent = React.SyntheticEvent<EventTarget> | Event;
-export function stopEvent(event: MixedEvent) {
-  event.stopPropagation();
-}
-export function stopEventImmediately(event: React.SyntheticEvent<EventTarget>) {
-  event.nativeEvent.stopImmediatePropagation();
-}
-export function cancelEvent(event: MixedEvent) {
-  event.stopPropagation();
-  event.preventDefault();
-}
-export function requestPointerLock(element: Element): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const handleChange = () => {
-      // $FlowIssue
-      if (document.pointerLockElement === element) {
-        resolve();
-        removeHandlers();
-      }
-    };
-
-    const handleError = () => {
-      reject();
-      removeHandlers();
-    };
-
-    const removeHandlers = () => {
-      // $FlowFixMe
-      forget(document, {
-        pointerlockchange: handleChange,
-        pointerlockerror: handleError,
-      });
-    };
-
-    // $FlowFixMe
-    listen(document, {
-      pointerlockchange: handleChange,
-      pointerlockerror: handleError,
-    });
-    element.requestPointerLock();
-  });
-}
-export function checkDateInputSupport(): boolean {
-  const input = window.document.createElement('input');
-  input.setAttribute('type', 'date');
-  const notADateValue = 'not-a-date';
-  input.setAttribute('value', notADateValue);
-  return input.value !== notADateValue;
-}
-//reference: https://stackoverflow.com/a/10199306
-export const getListPasteHandler = ({
-  listItemSeparatorRegex = /[\,\n]/,
-  handleValue,
-}: {
-  listItemSeparatorRegex?: RegExp;
-  handleValue?: (arg0: string[]) => unknown;
-}): ((arg0: ClipboardEvent) => unknown) => {
-  const handlePaste = (event: ClipboardEvent) => {
-    const value = event.clipboardData?.getData('text');
-
-    if (!value || !value.length) {
-      return;
-    }
-
-    //do nothing if the copied string fails the regex test
-    if (!listItemSeparatorRegex.test(value)) {
-      return;
-    }
-
-    event.preventDefault();
-    const parsedValues = value
-      .split(listItemSeparatorRegex)
-      .reduce((acc, val) => {
-        const newVal = val.trim();
-
-        if (
-          // value exists
-          !!newVal.length && // value not already in queue
-          !acc.includes(newVal)
-        ) {
-          acc.push(newVal);
-        }
-
-        return acc;
-      }, []);
-    handleValue?.(parsedValues);
-  };
-
-  return handlePaste;
-};

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

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

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

@@ -1,48 +0,0 @@
-export const uuid = (): string => {
-  let dt = new Date().getTime();
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (dt + Math.random() * 16) % 16 | 0;
-    dt = Math.floor(dt / 16);
-    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-  });
-};
-export const range = (start: number, end: number): Array<number> => {
-  const length = end - start + 1;
-  return Array.from(
-    {
-      length,
-    },
-    (_, i) => start + i,
-  );
-};
-export const convertFileSize = (fileSize: number = 0): string => {
-  let sizeInBytes = fileSize;
-
-  // Check if the file size is less than 1024
-  if (sizeInBytes < 0) {
-    sizeInBytes = Math.abs(sizeInBytes);
-  }
-
-  // Handle the case where the file size is 0 or negative
-  if (sizeInBytes <= 0) {
-    return '0 B';
-  }
-
-  // Check if the file size is less than 1024
-  if (sizeInBytes < 1024) {
-    // Return the file size in bytes
-    return sizeInBytes.toString() + ' B';
-  } // Check if the file size is less than 1048576
-  else if (sizeInBytes < 1048576) {
-    // Return the file size in KB
-    return (sizeInBytes / 1024).toFixed(1) + ' KB';
-  } // Check if the file size is less than 1073741824
-  else if (sizeInBytes < 1073741824) {
-    // Return the file size in MB
-    return (sizeInBytes / 1048576).toFixed(1) + ' MB';
-  } // Otherwise, the file size is greater than or equal to 1073741824
-  else {
-    // Return the file size in GB
-    return (sizeInBytes / 1073741824).toFixed(1) + ' GB';
-  }
-};

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

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

package/lib/utils/index.d.ts

@@ -1,14 +0,0 @@
-export * from './array';
-export * from './charts';
-export * from './classify';
-export * from './click-away';
-export * from './date-range-picker';
-export * from './dom';
-export * from './helpers';
-export * from './makeClassNameComponent';
-export * from './menu';
-export * from './merge-refs';
-export * from './rating';
-export * from './score-bar';
-export * from './string';
-export * from './tokens';

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

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

package/lib/utils/makeClassNameComponent/makeClassNameComponent.d.ts

@@ -1,73 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../classify';
-export function nameHoc<C, T extends React.ComponentType<C>, C2>(
-  WrapperComponent: T,
-  WrappedComponent: React.ComponentType<C2>,
-  hocName: string,
-): T {
-  const wrappedComponentName =
-    WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;
-  return WrapperComponent;
-}
-export type ClassNameComponent<
-  T = 'div',
-  I = React.ElementRef<T>,
-> = React.AbstractComponent<
-  JSX.LibraryManagedAttributes<T, React.ComponentProps<T>>,
-  I
->;
-export function makeClassNameComponent<C extends string>(
-  baseClassName: string, // $FlowFixMe not sure how to type this correctly
-  ComponentType: C = 'div',
-  name?: string,
-): React.AbstractComponent<
-  JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
-  React.ElementRef<C>
-> {
-  return React.forwardRef(
-    // $FlowFixMe[escaped-generic]
-    nameComponent(
-      (
-        {className, ...props},
-        ref, // $FlowFixMe[escaped-generic]
-      ) => (
-        <ComponentType
-          {...props}
-          ref={ref}
-          className={classify(baseClassName, className)}
-        />
-      ),
-      `CNC(${name || ComponentType})`,
-    ),
-  );
-}
-export function makeClassNameComponentCustom<
-  C extends $ReadOnly<{
-    className?: string;
-  }>,
-  B,
->(
-  baseClassName: string,
-  ComponentType: React.AbstractComponent<C, B>,
-): React.AbstractComponent<C, B> {
-  return React.forwardRef(
-    nameHoc(
-      ({className, ...props}, ref) => (
-        <ComponentType
-          {...props}
-          ref={ref}
-          className={classify(baseClassName, className)}
-        />
-      ),
-      ComponentType,
-      'CNC',
-    ),
-  );
-}
-
-function nameComponent(component, name) {
-  component.displayName = name;
-  return component;
-}

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

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

package/lib/utils/merge-refs/index.d.ts

@@ -1 +0,0 @@
-export * from './merge-refs';

package/lib/utils/merge-refs/merge-refs.d.ts

@@ -1,15 +0,0 @@
-export function mergeRefs(
-  refs: Array<{
-    current: HTMLElement | null | undefined;
-  }>,
-): (value: HTMLElement | null | undefined) => void {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}

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

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

package/lib/utils/rating/rating.d.ts

@@ -1,31 +0,0 @@
-export const RATING_ERRORS = Object.freeze({
-  INVALID_RANGE: {
-    type: 'INVALID_RANGE',
-    description:
-      "Given rating's stop value cannot come before the start value.",
-  },
-  INVALID_RATING_LABELS: {
-    type: 'INVALID_RATING_LABELS',
-    description: 'Given rating labels are invalid.',
-  },
-});
-export const RATINGS: Array<string> = [
-  'Not-Qualified',
-  'Proficient',
-  'Silver',
-  'Gold',
-  'Platinum',
-  'Diamond',
-];
-export const getRatingLabel = (
-  rating: number,
-  labels: Array<string>,
-): string => {
-  if (rating <= 0) {
-    return labels[0];
-  } else if (rating >= labels.length) {
-    return labels.slice(-1)[0];
-  } else {
-    return labels[rating];
-  }
-};

package/lib/utils/score-bar/index.d.ts

@@ -1 +0,0 @@
-export * from './score-bar';

package/lib/utils/score-bar/score-bar.d.ts

@@ -1,54 +0,0 @@
-import type {
-  ScoreBarColorMap,
-  ScoreBarLabelMap,
-} from '../../components/ScoreBar';
-
-const getValidRange = (
-  score: number,
-  totalBars: number,
-  keys: Array<string>,
-): string => {
-  const scorePercentage = (100 * score) / totalBars;
-
-  for (const key of keys) {
-    if (scorePercentage <= Number(key)) {
-      return key;
-    }
-  }
-
-  return [...keys].pop() || '';
-};
-
-export const getColorByScorePercentage = (
-  totalBars: number,
-  score: number,
-  currentBarNumber: number,
-  colorMap: ScoreBarColorMap,
-): string => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
-
-  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
-  const validColor = colorMap[validRange];
-  return currentBarNumber < score ? validColor : colorMap.inactive;
-};
-export const getLabelByScorePercentage = (
-  score: number,
-  totalBars: number,
-  labelMap?: ScoreBarLabelMap,
-): string => {
-  if (!labelMap) {
-    return '';
-  }
-
-  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
-  const validLabel = labelMap[validRange];
-  return validLabel || '';
-};
-export const SCORE_BAR_ERRORS = Object.freeze({
-  INVALID_BAR_COUNT: {
-    type: 'INVALID_BAR_COUNT',
-    description: 'totalBars can not be less than 1',
-  },
-});

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

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

package/lib/utils/string/string.d.ts

@@ -1,30 +0,0 @@
-export const capitalize = (word: string): string => {
-  if (!word) {
-    return '';
-  }
-
-  return word
-    .toLowerCase()
-    .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
-};
-export const escapeRegExp = (str: string): string =>
-  str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-export const formatWord = (word: string, count: number): string =>
-  count === 1 ? word : word + 's';
-export const truncateString = (
-  inputString: string,
-  maxLength: number,
-): string => {
-  if (inputString.length > maxLength) {
-    return inputString.substring(0, maxLength - 3) + '...';
-  }
-
-  return inputString;
-};
-export const appendPx = (value?: number | string): string => {
-  if (typeof value === 'number') {
-    return `${value}px`;
-  }
-
-  return value ?? '';
-};

package/lib/utils/token-list-input/token-list-input.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-type V = {
-  key: string;
-  label: string;
-  arbitrary?: boolean;
-  multiarbitrary?: boolean;
-};
-type Group<V> = {
-  options: Array<V>;
-  groupTitle?: React.ReactNode;
-};
-export const getFirstOption = (options: Array<V>): V | null => {
-  // pick the first option from the options
-  if (options.length > 0) {
-    return options[0];
-  }
-
-  return null;
-};
-export const getFirstOptionFromGroup = (
-  groupTitleOptions: Array<Group<V>>,
-): V | null => {
-  if (groupTitleOptions.length > 0) {
-    const firstGroup = groupTitleOptions[0];
-
-    if (firstGroup.options && firstGroup.options.length > 0) {
-      return firstGroup.options[0];
-    }
-  }
-
-  return null;
-};

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

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