@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/utils/dom.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cancelEvent = cancelEvent;
+exports.checkDateInputSupport = checkDateInputSupport;
+exports.createElement = createElement;
+exports.forget = forget;
+exports.getAnchorPosition = getAnchorPosition;
+exports.getFixedAnchorPosition = getFixedAnchorPosition;
+exports.getListPasteHandler = void 0;
+exports.listen = listen;
+exports.pageHeight = pageHeight;
+exports.pxToNumber = pxToNumber;
+exports.requestPointerLock = requestPointerLock;
+exports.stopEvent = stopEvent;
+exports.stopEventImmediately = stopEventImmediately;
+
+function createElement(document, type, props) {
+  const el = document.createElement(type);
+  return Object.assign(el, props);
+}
+function pageHeight() {
+  const {
+    body,
+    documentElement
+  } = window.document;
+  return Math.max(body.scrollHeight, body.clientHeight, documentElement.scrollHeight, documentElement.clientHeight);
+}
+function getFixedAnchorPosition(element) {
+  let placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
+  let pad = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let justify = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'center';
+  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
+  };
+}
+function getAnchorPosition(element) {
+  let placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
+  let pad = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let justify = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'center';
+  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)
+  };
+}
+function pxToNumber(px) {
+  return parseFloat(px.replace('px', '') || '0');
+}
+
+// TODO (kyle): add more handler types?
+
+function listen(target, handlers, options) {
+  let hook = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'addEventListener';
+  for (const eventName in handlers) {
+    // $FlowFixMe indexing valid EventTarget properties
+    target[hook](eventName, handlers[eventName], options);
+  }
+}
+function forget(target, events, options) {
+  return listen(target, events, options, 'removeEventListener');
+}
+function stopEvent(event) {
+  event.stopPropagation();
+}
+function stopEventImmediately(event) {
+  event.nativeEvent.stopImmediatePropagation();
+}
+function cancelEvent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}
+function requestPointerLock(element) {
+  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();
+  });
+}
+function checkDateInputSupport() {
+  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
+
+const getListPasteHandler = _ref => {
+  let {
+    listItemSeparatorRegex = /[\,\n]/,
+    handleValue
+  } = _ref;
+  const handlePaste = event => {
+    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;
+};
+exports.getListPasteHandler = getListPasteHandler;

package/lib/utils/dom.js.flow

@@ -0,0 +1,238 @@
+// @flow strict
+
+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: {[string]: mixed, ...},
+): 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: (MouseEvent) => mixed,
+  mousedown: (MouseEvent) => mixed,
+  mouseup: (MouseEvent) => mixed,
+  pointerdown: (PointerEvent) => mixed,
+  pointerup: (PointerEvent) => mixed,
+  pointercancel: (PointerEvent) => mixed,
+  [string]: (Event) => mixed,
+}>;
+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 = SyntheticEvent<EventTarget> | Event;
+export function stopEvent(event: MixedEvent) {
+  event.stopPropagation();
+}
+export function stopEventImmediately(event: 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?: (string[]) => mixed,
+}): ((ClipboardEvent) => mixed) => {
+  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/helpers.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uuid = void 0;
+
+const uuid = () => {
+  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);
+  });
+};
+exports.uuid = uuid;

package/lib/utils/helpers.js.flow

@@ -0,0 +1,11 @@
+// @flow strict
+
+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);
+  });
+};

package/lib/utils/makeClassNameComponent.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = makeClassNameComponent;
+exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
+exports.nameHoc = nameHoc;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("./classify"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function nameHoc(WrapperComponent, WrappedComponent, hocName) {
+  const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;
+  return WrapperComponent;
+}
+function makeClassNameComponent(baseClassName) {
+  let ComponentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+  let name = arguments.length > 2 ? arguments[2] : undefined;
+  return /*#__PURE__*/React.forwardRef(
+  // $FlowFixMe[escaped-generic]
+  nameComponent((_ref, ref) => {
+    let {
+      className,
+      ...props
+    } = _ref;
+    return (
+      /*#__PURE__*/
+      // $FlowFixMe[escaped-generic]
+      (0, _jsxRuntime.js)(ComponentType, {
+        ...props,
+        ref: ref,
+        className: (0, _classify.default)(baseClassName, className)
+      })
+    );
+  }, `CNC(${name || ComponentType})`));
+}
+function makeClassNameComponentCustom(baseClassName, ComponentType) {
+  return /*#__PURE__*/React.forwardRef(nameHoc((_ref2, ref) => {
+    let {
+      className,
+      ...props
+    } = _ref2;
+    return /*#__PURE__*/(0, _jsxRuntime.js)(ComponentType, {
+      ...props,
+      ref: ref,
+      className: (0, _classify.default)(baseClassName, className)
+    });
+  }, ComponentType, 'CNC'));
+}
+function nameComponent(component, name) {
+  component.displayName = name;
+  return component;
+}

package/lib/utils/makeClassNameComponent.js.flow

@@ -0,0 +1,71 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from './classify';
+
+
+export function nameHoc<C, T: 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<React.ElementConfig<T>, I>;
+
+export default function makeClassNameComponent<C: string>(
+  baseClassName: string,
+  // $FlowFixMe not sure how to type this correctly
+  ComponentType: C = 'div',
+  name?: string,
+): React.AbstractComponent<React.ElementConfig<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: $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/merge-refs.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeRefs = mergeRefs;
+function mergeRefs(refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}

package/lib/utils/merge-refs.js.flow

@@ -0,0 +1,14 @@
+// @flow strict
+export function mergeRefs(
+  refs: Array<{current: ?HTMLElement, ...}>,
+): (value: empty) => void {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}

package/lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  'src/**/*.{js,jsx}': [`prettier --write`, `eslint src --fix`],
+  'src/**/*.css': [`prettier --write`],
+  '**': [`cspell`],
+};