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

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

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

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

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

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

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

package/lib/utils/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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