@telus-uds/components-base 1.3.0 → 1.3.1

package/lib-module/utils/input.js

@@ -0,0 +1,180 @@
+import { useCallback, useRef, useState } from 'react';
+const pluralHooks = ['useMultipleInputValues'];
+
+const validateProps = ({
+  value,
+  onChange,
+  readOnly,
+  initialValue
+}, {
+  isCurrentlyControlled,
+  isControlled
+}, hookName) => {
+  const s = pluralHooks.includes(hookName) ? 's' : '';
+
+  const usageError = error => {
+    // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
+    // Help devs out by telling them exactly which hook threw the error as well as why.
+    throw new Error(`${hookName} ${error}.
+
+Consumers of this hook must be one of:
+1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
+2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
+3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
+`);
+  };
+
+  if (value && !onChange && !readOnly) {
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+  }
+
+  if (initialValue && value) {
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+  }
+
+  if (isControlled && !isCurrentlyControlled) {
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+  }
+
+  if (!isControlled && isCurrentlyControlled) {
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+  }
+};
+/**
+ * Hook used for controlling the input state of input components that have a singular value.
+ * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
+ * If `value` prop is undefined, the hook manages its own state.
+ *
+ * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
+ * management tools such as Formik and React Hooks Form.
+ *
+ * @param {object} props
+ * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
+ * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
+ * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
+ * @param {boolean} [props.readOnly] - if true, stops the input values from changing
+ *
+ * @param {string} hookName - optional, used for tailoring error messages
+ *
+ * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
+ *          a function returning a new value from the old value
+ * @returns {{
+ *   currentValue: string|number|null
+ *   setValue: (newValue: string|number|null|UpdaterFunction) => void
+ *   resetValue: () => void
+ *   isControlled: bool
+ * }}
+ */
+
+
+export const useInputValue = (props = {}, hookName = 'useInputValue') => {
+  const isCurrentlyControlled = props.value !== undefined;
+  const [isControlled] = useState(isCurrentlyControlled);
+  validateProps(props, {
+    isControlled,
+    isCurrentlyControlled
+  }, hookName);
+  const {
+    value,
+    initialValue,
+    onChange,
+    readOnly = false
+  } = props;
+  const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
+  const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
+  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
+
+  const valueRef = useRef({
+    initial: currentValue,
+    value: currentValue
+  }); // Make current value accessible inside useCallback without rememoizing every time the value changes
+
+  valueRef.current.value = currentValue;
+  const setValue = useCallback((arg, event) => {
+    if (readOnly) return;
+    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
+    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
+
+    if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
+  }, [isControlled, onChange, readOnly]);
+  const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
+  return {
+    currentValue,
+    setValue,
+    resetValue,
+    isControlled
+  };
+};
+/**
+ * Hook used for controlling the input state of input components that have multiple named on/off states.
+ * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
+ * If `values` prop is not passed in, the hook manages its own state.
+ *
+ * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
+ * management tools such as Formik and React Hooks Form.
+ *
+ * @param {object} props
+ * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
+ * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
+ * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
+ * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
+ * @param {boolean} [props.readOnly] - if true, stops the input values from changing
+ *
+ * @param {string} componentName - optional, used in error messages
+ *
+ * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
+ *          a function returning new values from old values
+ * @returns {{
+ *   currentValues: any
+ *   resetValues: () => void
+ *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
+ *   toggleOneValue: (value: string|number) => void
+ *   unsetValues: () => void
+ * }}
+ */
+
+export const useMultipleInputValues = ({
+  values,
+  initialValues,
+  maxValues,
+  onChange,
+  readOnly
+} = {}) => {
+  const {
+    currentValue,
+    setValue,
+    resetValue
+  } = useInputValue({
+    readOnly,
+    onChange,
+    value: values,
+    // if we're controlling our own state, always start with an array
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+  }, 'useMultipleInputValues');
+  const enforceMaxValues = useCallback(newValues => {
+    if (!maxValues) return newValues;
+    const excess = newValues.length - maxValues;
+    return excess > 0 ? newValues.slice(excess) : newValues;
+  }, [maxValues]);
+  const currentValues = enforceMaxValues(currentValue);
+  const setValues = useCallback((newValues, event) => {
+    const validNewValues = enforceMaxValues(newValues);
+    setValue(validNewValues, event);
+  }, [setValue, enforceMaxValues]);
+  const resetValues = resetValue;
+  const unsetValues = useCallback(event => setValues([], event), [setValues]);
+  const toggleOneValue = useCallback((newValue, event) => {
+    if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+    // a deepEqual() function if there's any use case for toggling stored objects or arrays.
+
+    const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
+    setValues(newValues, event);
+  }, [currentValues, readOnly, setValues]);
+  return {
+    currentValues,
+    resetValues,
+    setValues,
+    toggleOneValue,
+    unsetValues
+  };
+};

package/lib-module/utils/pressability.js

@@ -0,0 +1,97 @@
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import pressProps from './props/pressProps';
+/**
+ * @typedef {import('react').ReactNode} ReactNode
+ */
+// These roles should result in cursor: pointer but don't in current RNW releases
+
+const shouldUseCursor = ['checkbox', 'radio', 'switch'];
+/**
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
+ * fail to apply an expected cursor style.
+ *
+ * @param {object} props
+ * @param {boolean} [props.inactive]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accessibilityRole]
+ * @returns
+ */
+
+export const getCursorStyle = ({
+  inactive,
+  disabled,
+  accessibilityRole
+}) => {
+  if (Platform.OS !== 'web') return undefined;
+  if (inactive || disabled) return staticStyles.notAllowed;
+  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
+  return undefined; // allows React Native Web's built-in logic to apply
+};
+/**
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
+ */
+
+/**
+ * Maps the state object given by the React Native `Pressable` component to the set of
+ * equivalent appearance names used in UDS.
+ *
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
+ *   render functions passed to its `style` or `children` props.
+ * @param {object} [additionalState] - properties specific to the current component,
+ *   such as `inactive`, `selected`, etc.
+ * @returns {object}
+ */
+
+export const resolvePressableState = ({
+  pressed = false,
+  focused = false,
+  hovered = false
+} = {}, additionalState) => ({ ...additionalState,
+  focus: focused,
+  hover: hovered,
+  pressed
+});
+/**
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
+ * object passed from the React Native `Pressable` component and optional extra properties.
+ *
+ * @param {object|function} tokens - UDS system tokens prop
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
+ * @param {object} [additionalState] - properties specific to the current component
+ * @returns {object} - resolved tokens object
+ */
+
+export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+  if (typeof tokens !== 'function') return tokens;
+  const udsPressableState = resolvePressableState(pressableState, additionalState);
+  return tokens(udsPressableState);
+};
+const staticStyles = StyleSheet.create(Platform.select({
+  web: {
+    notAllowed: {
+      cursor: 'not-allowed'
+    },
+    pointer: {
+      cursor: 'pointer'
+    }
+  },
+  default: {}
+}));
+/**
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
+ * them in a function that passes in some provided args. Allows components containing a Pressable
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
+ */
+
+export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
+  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+    [key]: (...defaultArgs) => {
+      // Pass each handler data on this button and current selection
+      handler(...args, ...defaultArgs);
+    }
+  })));
+  return pressHandlers;
+};

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

@@ -0,0 +1,140 @@
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector'; // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+
+const nativeA11yPropTypes = {
+  accessible: PropTypes.bool,
+  focusable: PropTypes.bool,
+  accessibilityElementsHidden: PropTypes.bool,
+  accessibilityHint: PropTypes.string,
+  // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: PropTypes.bool,
+  accessibilityLabel: PropTypes.string,
+  accessibilityRole: PropTypes.string,
+  accessibilityActions: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string
+  })),
+  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: PropTypes.shape({
+    disabled: PropTypes.bool,
+    selected: PropTypes.bool,
+    checked: PropTypes.oneOf([true, false, 'mixed']),
+    busy: PropTypes.bool,
+    expanded: PropTypes.bool
+  }),
+  accessibilityValue: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+    now: PropTypes.number,
+    text: PropTypes.string
+  }),
+  accessibilityViewIsModal: PropTypes.bool,
+  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: PropTypes.func,
+  onAccessibilityEscape: PropTypes.func,
+  onAccessibilityTap: PropTypes.func
+};
+const a11yPropTypes = { ...nativeA11yPropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+};
+export default {
+  /**
+   * Proptypes for recognised React Native accessiblity (a11y) props.
+   * Spread this in the propTypes of components that accept React Native a11y props.
+   */
+  types: a11yPropTypes,
+
+  /**
+   * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
+   *
+   * Where components accept React Native a11y props, pass { ...rest } from its props to this,
+   * then spread the returned object into the component's props (usually its outer container).
+   */
+  select: getPropSelector(a11yPropTypes, /^aria-/),
+
+  /**
+   * Use this to disable focus for elements which are visually hidden but still rendered.
+   */
+  nonFocusableProps: {
+    focusable: false,
+    // for android, and for keyboard nav in web
+    ...Platform.select({
+      web: {
+        accessibilityHidden: true // web screenreaders
+
+      },
+      android: {
+        importantForAccessibility: 'no-hide-descendants'
+      },
+      ios: {
+        accessibilityElementsHidden: true
+      }
+    })
+  },
+
+  /**
+   * Generates an object of platform-appropriate a11y props describing an item that has an
+   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
+   * saying "Item X of Y" when this item is select.
+   *
+   * @param {number} itemsCount - the number of items in the set
+   * @param {number} index - the current item's index in the set
+   * @returns {object} - platform-applicable a11y props describing this position (if available)
+   */
+  getPositionInSet: (itemsCount, index) => Platform.select({
+    web: {
+      // accessibilityPosInSet etc exists in React Native Web main branch
+      // but not in a release compatible with Expo etc; just use `aria-*`
+      'aria-setsize': itemsCount,
+      'aria-posinset': index + 1
+    },
+    // No equivalents exist on the native side
+    default: {}
+  })
+};

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

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+};
+export default {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, PropTypes.func])),
+
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+    const translatedName = clickHandlerMapping[originalName];
+    return translatedName ? [translatedName, value] : [originalName, value];
+  }))
+};

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

@@ -0,0 +1,63 @@
+/**
+ * Returns a prop type validator which checks whether a prop is either a component or an array of
+ * components of a given type, based on their `name` or `displayName` properties.
+ * Use an array of strings for `passedName` to accept more than one component type.
+ * For an array the validation fails on the first occurrence of an invalid element.
+ *
+ * @param {string|string[]} passedName
+ * @return {function}
+ */
+export default function componentPropType(passedName) {
+  const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
+
+  const checkProp = (props, propName, componentName) => {
+    var _props$propName$type, _props$propName$type2;
+
+    if (props[propName] === undefined || props[propName] === null) {
+      return undefined;
+    }
+
+    if (Array.isArray(props[propName])) {
+      // Iterates through every child and try to find the first element that does not match the passed name
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+      return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
+    }
+
+    const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
+
+    if (!nameInProp || !passedNames.includes(nameInProp)) {
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
+    }
+
+    return undefined;
+  };
+
+  const checkRequired = (props, propName, componentName) => {
+    if (props[propName] === undefined) {
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+    }
+
+    return undefined;
+  };
+
+  const createValidate = isRequired => {
+    if (isRequired) {
+      return (props, propName, componentName) => {
+        const checkForError = checkProp(props, propName, componentName);
+
+        if (checkForError) {
+          return checkForError;
+        }
+
+        return checkRequired(props, propName, componentName);
+      };
+    }
+
+    return checkProp;
+  };
+
+  const validate = createValidate();
+  validate.isRequired = createValidate(true);
+  return validate;
+}

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

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

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

@@ -0,0 +1,6 @@
+export default function getPropSelector(propTypes, regexp) {
+  const keys = Object.keys(propTypes);
+  return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
+    [key]: value
+  } : items, {});
+}

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

@@ -0,0 +1,30 @@
+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: ({
+    download,
+    rel,
+    target,
+    ...rest
+  }) => ({
+    hrefAttrs: {
+      download,
+      rel,
+      target
+    },
+    rest
+  })
+};

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

@@ -0,0 +1,16 @@
+export * from './tokens';
+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 variantProp } from './variantProp';
+export { default as viewProps } from './viewProps';

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

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+export default {
+  types: {
+    /**
+     * 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: ({
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    tooltip,
+    validation,
+    ...rest
+  }) => ({
+    props: {
+      label,
+      hint,
+      hintPosition,
+      feedback,
+      tooltip,
+      validation
+    },
+    ...rest
+  })
+};

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

@@ -0,0 +1,47 @@
+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 on Native and throw if not given `onPress` or `href`.
+   *
+   * @param {({ onPress?: () => void, href?: string })}
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
+   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   */
+  handleHref: ({
+    onPress,
+    href
+  }) => {
+    if (!href && !onPress) {
+      throw new Error('handleHref requires either href or onPress');
+    }
+
+    return Platform.select({
+      web: onPress,
+      default: (...args) => {
+        if (onPress) onPress(...args);
+        if (href) Linking.openURL(href);
+      }
+    });
+  }
+};

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

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