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

package/lib/utils/makeClassNameComponent/makeClassNameComponent.js

@@ -16,15 +16,11 @@ function nameHoc(WrapperComponent, WrappedComponent, hocName) {
   WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;
   return WrapperComponent;
 }
-
-// @ts-ignore - TS2322 - Type 'T' is not assignable to type 'ComponentType<P>'.
-
-// @ts-ignore - TS2322 - Type 'C' is not assignable to type 'ComponentType<P>'.
 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(
-  // @ts-ignore - TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
+  // $FlowFixMe[escaped-generic]
   nameComponent((_ref, ref) => {
     let {
       className,
@@ -32,7 +28,7 @@ function makeClassNameComponent(baseClassName) {
     } = _ref;
     return (
       /*#__PURE__*/
-      // @ts-ignore - TS2604 - JSX element type 'ComponentType' does not have any construct or call signatures.
+      // $FlowFixMe[escaped-generic]
       React.createElement(ComponentType, _extends({}, props, {
         ref: ref,
         className: (0, _classify.default)(baseClassName, className)
@@ -41,27 +37,17 @@ function makeClassNameComponent(baseClassName) {
   }, `CNC(${name || ComponentType})`));
 }
 function makeClassNameComponentCustom(baseClassName, ComponentType) {
-  return /*#__PURE__*/React.forwardRef(
-  // @ts-ignore - TS2345 - Argument of type 'ComponentType<unknown>' is not assignable to parameter of type 'ForwardRefRenderFunction<B, unknown>'.
-  nameHoc(
-  // @ts-ignore - TS2345 - Argument of type '({ className, ...props }: { [x: string]: any; className: any; }, ref: any) => Element' is not assignable to parameter of type 'ComponentType<unknown>'. | TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
-  (_ref2, ref) => {
+  return /*#__PURE__*/React.forwardRef(nameHoc((_ref2, ref) => {
     let {
       className,
       ...props
     } = _ref2;
-    return (
-      /*#__PURE__*/
-      // @ts-ignore - TS2769 - No overload matches this call.
-      React.createElement(ComponentType, _extends({}, props, {
-        ref: ref,
-        className: (0, _classify.default)(baseClassName, className)
-      }))
-    );
+    return /*#__PURE__*/React.createElement(ComponentType, _extends({}, props, {
+      ref: ref,
+      className: (0, _classify.default)(baseClassName, className)
+    }));
   }, ComponentType, 'CNC'));
 }
-
-// @ts-ignore - TS7006 - Parameter 'component' implicitly has an 'any' type.
 function nameComponent(component, name) {
   component.displayName = name;
   return component;

package/lib/utils/makeClassNameComponent/makeClassNameComponent.js.flow

@@ -0,0 +1,70 @@
+// @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 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/menu/index.js.flow

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

package/lib/utils/menu/menu.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const getSelectedKeysFromSelectedOption = (currentOption, currentSelectedKeys) => {
   if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
     return [];

package/lib/utils/menu/menu.js.flow

@@ -0,0 +1,193 @@
+// @flow strict
+import * as React from 'react';
+
+import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';
+
+
+export const getSelectedKeysFromSelectedOption = (
+  currentOption?: MenuOption,
+  currentSelectedKeys?: Array<string>,
+): Array<string> => {
+  if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
+    return [];
+  }
+
+  let newSelectedKeys = [];
+
+  if (currentSelectedKeys.includes(currentOption.key)) {
+    newSelectedKeys = currentSelectedKeys.filter(
+      (item) => item !== currentOption.key,
+    );
+  } else {
+    newSelectedKeys = [...currentSelectedKeys, currentOption.key];
+  }
+
+  return newSelectedKeys;
+};
+
+export const getTextLabelFromSelectedKeys = (
+  currentSelectedKeys?: Array<string>,
+  options?: MenuOption[],
+): string => {
+  if (!Array.isArray(currentSelectedKeys) || !Array.isArray(options)) {
+    return '';
+  }
+
+  const selectedOptions = getOptionsFromKeys(options, currentSelectedKeys);
+
+  return selectedOptions.map((option) => option.label).join(', ');
+};
+
+export const getButtonLabelFromSelectedKeys = (
+  currentSelectedKeys?: Array<string>,
+  label?: React.Node,
+): React.Node => {
+  if (
+    !Array.isArray(currentSelectedKeys) ||
+    typeof label !== 'string' ||
+    !currentSelectedKeys.length
+  ) {
+    return label;
+  }
+
+  return `(${currentSelectedKeys.length}) ${label}`;
+};
+
+export const getOptionFromKey = (
+  options?: MenuOption[],
+  key?: string,
+): ?MenuOption => {
+  if (!Array.isArray(options) || !key || !options.length) {
+    return null;
+  }
+
+  return options.find((option) => option.key === key);
+};
+
+export const getOptionsFromKeys = (
+  options?: MenuOption[],
+  keys?: Array<string>,
+): Array<MenuOption> => {
+  if (
+    !Array.isArray(options) ||
+    !Array.isArray(keys) ||
+    !options.length ||
+    !keys.length
+  ) {
+    return [];
+  }
+
+  return options.filter((option) => keys.includes(option.key));
+};
+
+export const getFilteredOptionsFromSearchText = (
+  options: MenuOption[],
+  searchText: string,
+): MenuOption[] => {
+  if (!Array.isArray(options) || !options.length || !searchText) {
+    return options;
+  }
+
+  return options.filter((option) =>
+    option.label?.toLowerCase().includes(searchText.toLowerCase()),
+  );
+};
+
+export const getFilteredOptionsResultText = (
+  options: MenuOption[],
+  staticLabels: {[key: string]: string},
+): string => {
+  let resultCount = 0;
+
+  resultCount += options.length;
+
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
+
+  return generatedResultText;
+};
+
+export const getFilteredComposeOptionsFromSearchText = (
+  composeOptions: Array<Array<MenuOption>>,
+  searchText: string,
+): Array<Array<MenuOption>> => {
+  if (!Array.isArray(composeOptions) || !composeOptions.length || !searchText) {
+    return composeOptions;
+  }
+
+  return composeOptions
+    .map((optionGroup) =>
+      optionGroup.filter((option) =>
+        option.label?.toLowerCase().includes(searchText.toLowerCase()),
+      ),
+    )
+    .filter((group) => group.length > 0);
+};
+
+export const getFilteredComposeOptionsResultText = (
+  composeOptions: Array<Array<MenuOption>>,
+  staticLabels: {[key: string]: string},
+): string => {
+  let resultCount = 0;
+
+  composeOptions.forEach((optionGroup) => {
+    resultCount += optionGroup.length;
+  });
+
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
+
+  return generatedResultText;
+};
+
+export const getFilteredGroupTitleOptionsFromSearchText = (
+  groupTitleOptions: Array<MenuGroupTitleOption>,
+  searchText: string,
+): Array<MenuGroupTitleOption> => {
+  if (
+    !Array.isArray(groupTitleOptions) ||
+    !groupTitleOptions.length ||
+    !searchText
+  ) {
+    return groupTitleOptions;
+  }
+
+  return groupTitleOptions
+    .map((group) => ({
+      ...group,
+      options: group.options?.filter((option) =>
+        option.label?.toLowerCase().includes(searchText.toLowerCase()),
+      ),
+    }))
+    .filter((group) => group.options && group.options.length > 0);
+};
+
+export const getFilteredGroupTitleOptionsResultText = (
+  groupTitleOptions: Array<MenuGroupTitleOption>,
+  staticLabels: {[key: string]: string},
+): string => {
+  let resultCount = 0;
+
+  groupTitleOptions.forEach((group) => {
+    if (group.options) {
+      resultCount += group.options.length;
+    }
+  });
+
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
+
+  return generatedResultText;
+};

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

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

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

@@ -8,7 +8,6 @@ function mergeRefs(refs) {
   return value => {
     refs.forEach(ref => {
       if (typeof ref === 'function') {
-        // @ts-ignore - TS2349 - This expression is not callable.
         ref(value);
       } else if (ref != null) {
         ref.current = value;

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

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

package/lib/utils/rating/index.js.flow

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

package/lib/utils/rating/rating.js.flow

@@ -0,0 +1,35 @@
+// @flow strict
+
+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.js.flow

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

package/lib/utils/score-bar/score-bar.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+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.js.flow

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

package/lib/utils/string/string.js.flow

@@ -0,0 +1,33 @@
+// @flow strict
+
+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.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFirstOptionFromGroup = exports.getFirstOption = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const getFirstOption = options => {
   // pick the first option from the options
   if (options.length > 0) {

package/lib/utils/token-list-input/token-list-input.js.flow

@@ -0,0 +1,37 @@
+// @flow strict
+import * as React from 'react';
+
+
+type V = {
+  key: string,
+  label: string,
+  arbitrary?: boolean,
+  multiarbitrary?: boolean,
+  ...
+};
+
+type Group<V> = {
+  options: Array<V>,
+  groupTitle?: React.Node,
+  ...
+};
+
+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.js.flow

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