@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/utils/props/copyPropTypes.js

@@ -1,2 +0,0 @@
-import PropTypes from 'prop-types';
-export default PropTypes.oneOf(['en', 'fr']);

package/lib-module/utils/props/getPropSelector.js

@@ -1,48 +0,0 @@
-import merge from 'lodash.merge';
-import hasOwnProperty from '../hasOwnProperty';
-/**
- * @callback PropSelectorCallback - a callback called for each prop passed to a component
- * @param {string} key - the key for the prop to be tested
- * @param {*} value - the value of the prop being passed in to the component
- * @returns {object|undefined}
- */
-
-/**
- * @param {PropSelectorCallback} callback
- * @param {object} items
- * @param {string} key
- * @param {*} value
- * @returns {object|undefined}
- */
-
-const applyCallback = (callback, items, key, value) => {
-  // If there's no callback, continue and look up keys as normal
-  if (typeof callback !== 'function') return undefined;
-  const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
-
-  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
-
-  return merge({}, items, newItems);
-};
-/**
- * Generates a function to filter an object of props down to a subset of allowed props, with
- * optional prop alteration and re-mapping via an optional callback.
- *
- * @param {object} propTypes - an object where every defined key is a valid prop
- * @param {*} [regexp] - an optional regular expression where any match is a valid prop
- * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
- * @returns {object} - valid props for this component
- */
-
-
-export default function getPropSelector(propTypes, regexp, callback) {
-  return props => Object.entries(props).reduce((items, _ref) => {
-    let [key, value] = _ref;
-    return (// If there's a callback and it matches something, applyCallback merges it in; return that
-      applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
-      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
-        [key]: value
-      } : items)
-    );
-  }, {});
-}

package/lib-module/utils/props/handlerProps.js

@@ -1,117 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
-const focusHandlerProps = {
-  types: {
-    /**
-     * onBlur handler
-     */
-    onBlur: PropTypes.func,
-
-    /**
-     * onFocus handler
-     */
-    onFocus: PropTypes.func
-  }
-};
-focusHandlerProps.select = getPropSelector(focusHandlerProps.types);
-const textInputHandlerProps = {
-  types: {
-    /**
-     * onChange handler
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * onChangeText handler
-     */
-    onChangeText: PropTypes.func,
-
-    /**
-     * onClear handler
-     */
-    onClear: PropTypes.func,
-
-    /**
-     * onSubmit handler
-     */
-    onSubmit: PropTypes.func,
-
-    /**
-     * onSubmitEditing handler
-     */
-    onSubmitEditing: PropTypes.func,
-
-    /**
-     * onContentSizeChange handler
-     */
-    onContentSizeChange: PropTypes.func,
-
-    /**
-     * onEndEditing handler
-     */
-    onEndEditing: PropTypes.func,
-
-    /**
-     * onScroll handler
-     */
-    onScroll: PropTypes.func,
-
-    /**
-     * onSelectionChange handler
-     */
-    onSelectionChange: PropTypes.func,
-
-    /**
-     * onKeyPress handler
-     */
-    onKeyPress: PropTypes.func,
-
-    /**
-     * onKeyUp handler (only supported on Web)
-     */
-    onKeyUp: PropTypes.func,
-
-    /**
-     * onKeyDown handler (only supported on Web)
-     */
-    onKeyDown: PropTypes.func
-  }
-};
-const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);
-
-textInputHandlerProps.select = props => {
-  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
-  const {
-    onKeyPress,
-    onKeyUp,
-    onKeyDown,
-    ...resolvedProps
-  } = selectTextInputHandlers(props);
-
-  if (onKeyPress || onKeyUp || onKeyDown) {
-    if (Platform.OS !== 'web') {
-      // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
-      resolvedProps.onKeyPress = event => {
-        if (typeof onKeyDown === 'function') onKeyDown(event);
-        if (typeof onKeyPress === 'function') onKeyPress(event);
-        if (typeof onKeyUp === 'function') onKeyUp(event);
-      };
-    } else {
-      // React Native Web supports onKeyUp the normal way.
-      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
-      // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
-
-      if (onKeyPress || onKeyDown) {
-        resolvedProps.onKeyPress = event => {
-          if (typeof onKeyDown === 'function') onKeyDown(event);
-          if (typeof onKeyPress === 'function') onKeyPress(event);
-        };
-      }
-    }
-  }
-
-  return resolvedProps;
-};
-
-export { focusHandlerProps, textInputHandlerProps };

package/lib-module/utils/props/hrefAttrsProp.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types'; // Props related to HTML <a> anchor link attributes.
-
-const targetValues = ['_self', '_blank', '_parent', '_top'];
-export default {
-  types: {
-    // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
-    // and passes them to <a> if an element has a href prop or accessibilityRole "link"
-    download: PropTypes.string,
-    rel: PropTypes.string,
-    target: PropTypes.oneOf(targetValues)
-  },
-
-  /**
-   * Takes a props object, bundles any hrefAttrs props present into one object
-   * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
-   */
-  bundle: _ref => {
-    let {
-      download,
-      rel,
-      target,
-      ...rest
-    } = _ref;
-    return {
-      hrefAttrs: {
-        download,
-        rel,
-        target
-      },
-      rest
-    };
-  }
-};

package/lib-module/utils/props/index.js

@@ -1,19 +0,0 @@
-export * from './tokens';
-export * from './handlerProps';
-export { default as a11yProps } from './a11yProps';
-export { default as clickProps } from './clickProps';
-export { default as copyPropTypes } from './copyPropTypes';
-export { default as componentPropType } from './componentPropType';
-export { default as hrefAttrsProp } from './hrefAttrsProp';
-export { default as inputSupportsProps } from './inputSupportsProps';
-export { default as linkProps } from './linkProps';
-export { default as pressProps } from './pressProps';
-export { default as paddingProp } from './paddingProp';
-export { default as rectProp } from './rectProp';
-export { default as responsiveProps } from './responsiveProps';
-export { default as spacingProps } from './spacingProps';
-export { default as selectSystemProps } from './selectSystemProps';
-export { default as textInputProps } from './textInputProps';
-export { default as textProps } from './textProps';
-export { default as variantProp } from './variantProp';
-export { default as viewProps } from './viewProps';

package/lib-module/utils/props/inputSupportsProps.js

@@ -1,62 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  types: {
-    /**
-     * Whether the English or French copy will be used (e.g. for accessibility labels).
-     */
-    copy: PropTypes.oneOf(['en', 'fr']),
-
-    /**
-     * The input label.
-     */
-    label: PropTypes.string,
-
-    /**
-     * A short description of the expected input.
-     */
-    hint: PropTypes.string,
-
-    /**
-     * Position of the hint relative to label. Use `below` to display a larger hint below the label.
-     */
-    hintPosition: PropTypes.oneOf(['inline', 'below']),
-
-    /**
-     * A detailed description of validation error/success or additional instructions.
-     * Visual variant is determined based on the `validation` prop.
-     */
-    feedback: PropTypes.string,
-
-    /**
-     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-     */
-    tooltip: PropTypes.string,
-
-    /**
-     * Use to visually mark an input as valid or invalid.
-     */
-    validation: PropTypes.oneOf(['error', 'success'])
-  },
-  select: _ref => {
-    let {
-      copy,
-      label,
-      hint,
-      hintPosition,
-      feedback,
-      tooltip,
-      validation
-    } = _ref;
-    return {
-      supportsProps: {
-        copy,
-        label,
-        hint,
-        hintPosition,
-        feedback,
-        tooltip,
-        validation
-      }
-    };
-  }
-};

package/lib-module/utils/props/linkProps.js

@@ -1,44 +0,0 @@
-import Linking from "react-native-web/dist/exports/Linking";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { pressPropTypes } from './pressProps';
-import a11yProps from './a11yProps';
-import hrefAttrsProp from './hrefAttrsProp';
-import getPropSelector from './getPropSelector';
-const linkPropTypes = { ...pressPropTypes,
-  href: PropTypes.string,
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-  ...a11yProps.types
-};
-export default {
-  /**
-   * Proptypes for components that, on Web, can output <a href="..."> link elements
-   */
-  types: linkPropTypes,
-
-  /**
-   * Filters a props object, returning only the platform-relevant link props defined above
-   */
-  select: getPropSelector(linkPropTypes),
-
-  /**
-   * Turn hrefs into press handlers that open links on Native.
-   *
-   * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
-   * handler is provided (expects calling component to render as `<a href={href}>` on web).
-   */
-  handleHref: _ref => {
-    let {
-      onPress,
-      href
-    } = _ref;
-    return Platform.select({
-      web: onPress,
-      default: function () {
-        if (onPress) onPress(...arguments);
-        if (href) Linking.openURL(href);
-      }
-    });
-  }
-};

package/lib-module/utils/props/paddingProp.js

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  propType: PropTypes.shape({
-    paddingBottom: PropTypes.number,
-    paddingLeft: PropTypes.number,
-    paddingRight: PropTypes.number,
-    paddingTop: PropTypes.number
-  })
-};

package/lib-module/utils/props/pressProps.js

@@ -1,42 +0,0 @@
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import rectProp from './rectProp';
-import getPropSelector from './getPropSelector';
-const pressHandlerPropTypes = {
-  onPress: PropTypes.func,
-  onPressIn: PropTypes.func,
-  onPressOut: PropTypes.func,
-  ...Platform.select({
-    web: {
-      onMouseEnter: PropTypes.func,
-      onMouseLeave: PropTypes.func,
-      onFocus: PropTypes.func,
-      onBlur: PropTypes.func
-    },
-    default: {
-      onLongPress: PropTypes.func
-    }
-  })
-};
-export const pressPropTypes = { ...pressHandlerPropTypes,
-  disabled: PropTypes.bool,
-  ...Platform.select({
-    web: {},
-    default: {
-      hitSlop: PropTypes.number,
-      pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
-    }
-  })
-};
-export default {
-  /**
-   * Proptypes for clickable or pressable components, including web-only props
-   */
-  types: pressPropTypes,
-
-  /**
-   * Filters a props object, returning only the platform-relevant press props defined above
-   */
-  select: getPropSelector(pressPropTypes),
-  selectHandlers: getPropSelector(pressHandlerPropTypes)
-};

package/lib-module/utils/props/rectProp.js

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  propType: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })
-};

package/lib-module/utils/props/responsiveProps.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-
-const getByViewport = propType => ({
-  xs: propType,
-  sm: propType,
-  md: propType,
-  lg: propType,
-  xl: propType
-});
-/**
- * Utilities for props that allow different values to be applied at different viewports.
- *
- * These should apply viewport inheritance such that if a viewport is undefined, the value is
- * taken from the next smallest viewport for which a value is available. For example, a
- * responsive prop { xs: 2, lg: 3 } should apply 2 at sizes sm and md, and 3 at size xl.
- *
- * @property {Function} getByViewport - returns an object where each each viewport has a key
- *   containing the provided argument.
- * @property {Function} getTypeByViewport - returns a PropTypes shape validator for an object where
- *   each viewport has a key containing the provided proptype.
- * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
- *   either the provided proptype on its own, or the output of getTypeByViewport
- */
-
-
-export default {
-  getByViewport,
-  getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),
-  getTypeOptionallyByViewport: propType => PropTypes.oneOfType([propType, PropTypes.shape(getByViewport(propType))])
-};

package/lib-module/utils/props/selectSystemProps.js

@@ -1,24 +0,0 @@
-// Returns a selector for requested prop kinds as well as the propTypes for
-// those props merged into one object
-export default function selectSystemProps(systemPropHelpers) {
-  const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
-    if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
-    }
-
-    return { ...acc,
-      ...propHelper.select(props)
-    };
-  }, {});
-
-  const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
-    if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
-    }
-
-    return { ...acc,
-      ...propHelper.types
-    };
-  }, {});
-  return [selectProps, selectedPropTypes];
-}

package/lib-module/utils/props/spacingProps.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import responsiveProps from './responsiveProps';
-import variantProp from './variantProp';
-/**
- * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
- *
- * @typedef SpacingOptions
- * @property {VariantProp} [SpacingOptions.variant] - optional theme scale variants e.g. compact, wide
- * @property {number} [SpacingOptions.size] - optional override to force a particular pixel size
- * @property {number} [SpacingOptions.subtract] - optional number to subtract from final pixel size
- *
- * @typedef SpacingObject
- * @property {SpacingIndex} [SpacingObject.xs] - space scale index to use above xs viewport
- * @property {SpacingIndex} [SpacingObject.sm] - space scale index to use above sm viewport
- * @property {SpacingIndex} [SpacingObject.md] - space scale index to use above md viewport
- * @property {SpacingIndex} [SpacingObject.lg] - space scale index to use above lg viewport
- * @property {SpacingIndex} [SpacingObject.xl] - space scale index to use above xl viewport
- * @property {SpacingIndex} [SpacingObject.space] - space scale index to use at all viewports
- * @property {SpacingOptions} [SpacingObject.options] - optional options for this spacing
- *
- * @typedef {SpacingIndex|SpacingObject} SpacingValue
- */
-
-const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const spacingIndexPropType = PropTypes.oneOf(spacingScale);
-const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
-  space: spacingIndexPropType,
-  options: PropTypes.shape({
-    variant: variantProp.propType,
-    size: PropTypes.number
-  })
-});
-/**
- * Components and utilities that assign fixed space between components use a theme-defined spacing scale.
- *
- * They typically take one or more props of the {@link SpacingValue} type and turn it into a pixel size value
- * using the hook `useSpacingScale`, which resolves any options or responsive behaviour and returns the
- * appropriate value from the theme spacing scale.
- *
- * - see /ADRs/inter-component-spacing/README.md - ADR on this structure
- * - see /src/utils/spacing/useSpacingScale.js - hook that processes spacing values
- * - @see {@link SpacingIndex} - themes provide spacing scales of up to 12 sizes with optional theme rules.
- * - @see {@link SpacingValue} - either a simple number referencing an index position on the spacing
- *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
- *   viewports or `space` to apply at all viewports.
- */
-
-export default {
-  scale: spacingScale,
-  types: {
-    spacingIndex: spacingIndexPropType,
-    spacingObject: spacingObjectPropType,
-    // Most spacing components and utilities take this prop / arg type:
-    spacingValue: PropTypes.oneOfType([spacingIndexPropType, spacingObjectPropType])
-  }
-};