@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/TextInput/TextInputBase.js

@@ -1,333 +0,0 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import NativeTextInput from "react-native-web/dist/exports/TextInput";
-import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import StackView from '../StackView';
-import IconButton from '../IconButton';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
-
-const selectInputStyles = (_ref, themeOptions, inactive) => {
-  let {
-    backgroundColor,
-    color,
-    borderWidth = 0,
-    borderColor,
-    borderRadius,
-    paddingTop = 0,
-    paddingBottom = 0,
-    paddingLeft,
-    paddingRight = 0,
-    fontName,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    icon,
-    iconSize = 0,
-    minLines,
-    maxLines,
-    width,
-    height
-  } = _ref;
-
-  // Subtract border width from padding so overall input width/height doesn't
-  // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-
-  const textStyles = applyTextStyles({
-    fontName,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    themeOptions
-  });
-
-  function linesToHeight(lines) {
-    const {
-      lineHeight: absoluteLineHeight
-    } = textStyles;
-    return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined;
-  }
-
-  const minHeight = linesToHeight(minLines);
-  const maxHeight = linesToHeight(maxLines);
-  const webStyles = Platform.select({
-    web: {
-      outline: 'none',
-      cursor: inactive ? 'not-allowed' : undefined,
-      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
-
-    }
-  });
-  const paddingWithIcon = iconSize + paddingRight;
-  return {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
-    minHeight,
-    maxHeight,
-    width,
-    height,
-    ...textStyles,
-    ...webStyles
-  };
-};
-
-const selectOuterBorderStyles = _ref2 => {
-  let {
-    outerBackgroundColor,
-    outerBorderWidth,
-    outerBorderColor,
-    borderRadius
-  } = _ref2;
-  return {
-    background: outerBackgroundColor,
-    ...applyOuterBorder({
-      outerBorderColor,
-      outerBorderWidth,
-      borderRadius
-    })
-  };
-};
-
-const selectIconTokens = _ref3 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref3;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-
-const selectIconContainerStyles = (_ref4, buttonCount) => {
-  let {
-    buttonSize,
-    buttonsGapSize,
-    paddingRight,
-    paddingBottom
-  } = _ref4;
-  return {
-    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
-    paddingBottom
-  };
-};
-
-const selectButtonsContainerStyle = _ref5 => {
-  let {
-    buttonsPaddingRight
-  } = _ref5;
-  return {
-    paddingRight: buttonsPaddingRight
-  };
-};
-
-const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
-  let {
-    buttons = [],
-    copy = 'en',
-    height,
-    inactive,
-    initialValue,
-    onBlur,
-    onChange,
-    onChangeText,
-    onClear,
-    onFocus,
-    onMouseOut,
-    onMouseOver,
-    pattern,
-    readOnly,
-    tokens,
-    value,
-    variant = {},
-    ...rest
-  } = _ref6;
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = event => {
-    setIsFocused(true);
-    if (typeof onFocus === 'function') onFocus(event);
-  };
-
-  const handleBlur = event => {
-    setIsFocused(false);
-    if (typeof onBlur === 'function') onBlur(event);
-  };
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseOver = event => {
-    setIsHovered(true);
-    if (typeof onMouseOver === 'function') onMouseOver(event);
-  };
-
-  const handleMouseOut = event => {
-    setIsHovered(false);
-    if (typeof onMouseOut === 'function') onMouseOut(event);
-  };
-
-  const defaultRef = useRef();
-  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-  const {
-    currentValue,
-    resetValue,
-    setValue,
-    isControlled,
-    isDirty
-  } = useInputValue({
-    value,
-    initialValue,
-    inputRef,
-    onChange,
-    readOnly
-  });
-  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-  useEffect(() => {
-    if (Platform.OS === 'web' && pattern && element) {
-      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
-      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
-      element.pattern = pattern;
-    }
-  }, [element, pattern]);
-
-  const handleChangeText = event => {
-    var _event$nativeEvent, _event$target;
-
-    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    setValue(text, event);
-    if (typeof onChangeText === 'function') onChangeText(text, event);
-  };
-
-  const states = {
-    focus: isFocused,
-    hover: isHovered,
-    inactive
-  };
-  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
-  const {
-    buttonsGap,
-    clearButtonIcon: ClearButtonIcon,
-    icon: IconComponent
-  } = themeTokens;
-  const buttonsGapSize = useSpacingScale(buttonsGap);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-
-  if (onClear && isDirty) {
-    const handleClear = event => {
-      var _inputRef$current;
-
-      onClear === null || onClear === void 0 ? void 0 : onClear(event);
-      resetValue(event);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    };
-
-    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/_jsx(IconButton, {
-      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-      icon: ClearButtonIcon,
-      onPress: handleClear,
-      variant: {
-        compact: true
-      }
-    }, "clear"));
-  }
-
-  const inputProps = { ...selectProps(rest),
-    editable: !inactive,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onChange: handleChangeText,
-    defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
-    value: isControlled ? currentValue : undefined
-  };
-  const {
-    themeOptions
-  } = useTheme();
-  const nativeInputStyle = selectInputStyles({ ...themeTokens,
-    height
-  }, themeOptions, inactive);
-  return /*#__PURE__*/_jsxs(View, {
-    style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/_jsx(NativeTextInput, {
-      ref: inputRef,
-      style: nativeInputStyle,
-      ...inputProps
-    }), IconComponent && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none" // avoid hijacking input press events
-      ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
-        buttonsGapSize
-      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
-      })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/_jsx(StackView, {
-        direction: "row",
-        space: buttonsGap,
-        children: buttons
-      })
-    })]
-  });
-});
-TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  buttons: PropTypes.arrayOf(PropTypes.node),
-
-  /**
-   * Select English or French copy for the accessible labels.
-   * You may also pass in a custom dictionary object.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    clearButtonAccessibilityLabel: PropTypes.string
-  })]),
-  height: PropTypes.number,
-  inactive: PropTypes.bool,
-  initialValue: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onChangeText: PropTypes.func,
-  onClear: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  readOnly: PropTypes.bool,
-  tokens: getTokensPropType('TextInput', 'TextArea'),
-  value: PropTypes.string,
-  variant: variantProp.propType
-};
-export default TextInputBase;
-const staticStyles = StyleSheet.create({
-  buttonsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  },
-  iconContainer: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0
-  }
-});

package/lib-module/TextInput/dictionary.js

@@ -1,8 +0,0 @@
-export default {
-  en: {
-    clearButtonAccessibilityLabel: 'Clear'
-  },
-  fr: {
-    clearButtonAccessibilityLabel: 'Effacer'
-  }
-};

package/lib-module/TextInput/index.js

@@ -1,3 +0,0 @@
-import TextInput from './TextInput';
-import TextArea from './TextArea';
-export { TextInput, TextArea };

package/lib-module/TextInput/propTypes.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types'; // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
-// for generic React Native props and HTML input attrs that are passed through.
-
-const textInputPropTypes = {
-  /**
-   * If the input's state is to be controlled by a parent component, use this prop
-   * together with the `onChange` to pass down and update the lifted state.
-   */
-  value: PropTypes.string,
-
-  /**
-   * Use this to set the initial value of an uncontrolled input.
-   * Updating `initialValue` will **not** update the actual value.
-   */
-  initialValue: PropTypes.string,
-
-  /**
-   * Disables all user interactions with the input.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Makes it impossible to change the input's value.
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * Use to react upon input's value changes. Required when the `value` prop is set.
-   * Will receive the input's value as an argument.
-   */
-  onChange: PropTypes.func
-};
-export default textInputPropTypes;

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,74 +0,0 @@
-import React, { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
-import { validateThemeTokensVersion } from './utils';
-import responsiveProps from '../utils/props/responsiveProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
-// This should change in future major releases to become "opt-in" legacy support.
-
-const defaultThemeOptions = {
-  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-  forceAbsoluteFontSizing: true,
-  // TODO: switch `forceZIndex` to be false by default in the next major version
-  forceZIndex: true,
-  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
-};
-
-const ThemeProvider = _ref => {
-  let {
-    children,
-    defaultTheme,
-    themeOptions = {}
-  } = _ref;
-  const [theme, setTheme] = useState(defaultTheme);
-  const appliedThemeOptions = { ...defaultThemeOptions,
-    ...themeOptions
-  }; // Validate the theme tokens version on every render.
-  // This will intentionally break the application when attempting to use an invalid theme.
-  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
-
-  validateThemeTokensVersion(theme);
-  return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
-    value: setTheme,
-    children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
-      value: { ...theme,
-        themeOptions: appliedThemeOptions
-      },
-      children: children
-    })
-  });
-};
-
-ThemeProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  defaultTheme: PropTypes.shape({
-    metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
-    }).isRequired
-  }).isRequired,
-
-  /**
-   * An object containing options allowing to customize the theming experience:
-   *
-   * - `forceAbsoluteFontSizing`: available on web only; when set to true, allows
-   *   using absolute font sizing (in pixels, doesn't scale) instead of the
-   *   relative sizing (in `rem`, scales depending on the browser settings)
-   * - `contentMaxWidth`: allows configuration of the content max width to be used in components
-   *   such as Footnote and Notification to avoid content to stretch width more then the page's width
-   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
-   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
-   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
-   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
-   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
-   */
-  themeOptions: PropTypes.shape({
-    forceAbsoluteFontSizing: PropTypes.bool,
-    forceZIndex: PropTypes.bool,
-    enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
-  })
-};
-export default ThemeProvider;

package/lib-module/ThemeProvider/index.js

@@ -1,6 +0,0 @@
-import ThemeProvider from './ThemeProvider';
-export { default as useTheme } from './useTheme';
-export { default as useSetTheme } from './useSetTheme';
-export * from './useThemeTokens';
-export * from './utils';
-export default ThemeProvider;

package/lib-module/ThemeProvider/useSetTheme.js

@@ -1,25 +0,0 @@
-import { useCallback, useContext } from 'react';
-import { ThemeSetterContext } from './ThemeProvider';
-
-const useSetTheme = () => {
-  // Replace current theme with provided object
-  const setTheme = useContext(ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
-
-  if (setTheme instanceof Error) {
-    throw setTheme;
-  } // Merge provided object into current theme
-
-
-  const editTheme = useCallback(newTheme => setTheme(function () {
-    let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return { ...oldTheme,
-      ...newTheme
-    };
-  }), [setTheme]);
-  return {
-    setTheme,
-    editTheme
-  };
-};
-
-export default useSetTheme;

package/lib-module/ThemeProvider/useTheme.js

@@ -1,14 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from './ThemeProvider';
-
-const useTheme = () => {
-  const theme = useContext(ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
-
-  if (theme instanceof Error) {
-    throw theme;
-  }
-
-  return theme;
-};
-
-export default useTheme;

package/lib-module/ThemeProvider/useThemeTokens.js

@@ -1,110 +0,0 @@
-import { useCallback } from 'react';
-import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils';
-/**
- * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
- * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
- * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
- */
-
-/**
- * Returns a complete set of theme tokens for a component based on which of the
- * component's theme rules apply to the current set of theme appearances.
- *
- * When applying theme tokens as styles to a component, don't spread the theme tokens
- * object, explicitly select each property. This way, if new theme tokens are added to the
- * component's theme in a minor or patch release of the theme package, the appearance
- * of the component in sites and apps will only change when the component itself is updated.
- *
- * @example
- * const seletContainerTokens = ({ color, width, height }) => ({
- *   backgroundColor: color, width, height
- * })
- * const MyComponent = ({ tokens, variant, children }) => {
- *   const viewport = useViewport()
- *   const themeTokens = useThemeTokens('MyComponent', tokens, variant, { viewport })
- *   const style = seletContainerTokens(themeTokens)
- *   return <View style={style}>{children}</View>
- * }
- *
- * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
- * @param {TokensProp} [tokens] - every themed component should accept an optional `tokens` prop allowing theme tokens to be overridden
- * @param {AppearanceSet} [variants] - every themed component should accept an optional `variants` prop specifying theme variants
- * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
- * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
- */
-
-export const useThemeTokens = function (componentName) {
-  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
-  return themeTokens;
-};
-/**
- * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
- * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
- *
- * - Where tokens are to be obtained from state that is accessible only in scopes like callbacks
- *   and render functions, where calling useThemeTokens directly would be disallowed by React's hook rules.
- * - Passing a tokens getter down via a child component's `tokens` prop, applying rules using the
- *   child component's current state. Consider wrapping the returned tokens in `selectTokens()`.
- *
- * The function returned by `useThemeTokens` may be called with an object of state appearances to get an object
- * of tokens, or may be passed as a `tokens` prop to other themed components or `useThemeTokens`/`useThemeTokensCallback`
- * hooks.
- *
- * @example
- * // Resolving tokens inside Pressable's style function, based on Pressable state
- * const PressMe = ({ tokens, variant, children }) => {
- *   const getTokens = useThemeTokensCallback('PressMe', tokens, variant)
- *   const getPressableStyle = ({ pressed }) => {
- *     const { color, width, height } = getTokens({ pressed })
- *     return { backgroundColor: color, width, height }
- *   }
- *   return <Pressable style={getPressableStyle}>{children}</Pressable>
- * }
- *
- * @example
- * // Setting the theme in a parent and resolving it in a child based on child's state
- * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
- *   // Define what theme, variant etc we want in this component...
- *   const getTokens = useThemeTokensCallback('Button', tokens, variant)
- *   // ...resolve them in another component based on its state (e.g. press, hover...)
- *   return <ButtonBase tokens={getTokens} accessibilityRole="menuitem" {...buttonProps} />
- * }
- *
- * @example
- * // Chaining multiple themes together, sharing the same variants and state
- * const GlowingLink = ({ tokens, variant, children }) => {
- *   // applies a small theme for a glowing effect, using same variants and states as "link"
- *   const getGlowTokens = useThemeCallback('GlowingLink', tokens, variant)
- *   // applies link state to get "Link" theme tokens and merge "GlowingLink" tokens on top
- *   const getTokens = useThemeCallback('Link', getGlowTokens, variant)
- *   // renders a link with both themes applied, both based on current link state
- *   return <LinkBase tokens={getTokens}>{children}</LinkBase>
- * }
- *
- * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
- * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
- * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
- * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => TokensSet}
- *    - callback function that returning an overridable tokens set for current state. Only pass
- *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope,
- *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
- */
-
-export const useThemeTokensCallback = function (componentName) {
-  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
-    const appearances = mergeAppearances(variants, states);
-    const resolvedTokens = resolveThemeTokens(tokens, appearances, tokenOverrides);
-    return getThemeTokens(componentTheme, resolvedTokens, appearances);
-  }, [componentTheme, tokens, variants]);
-  return getThemeTokensCallback;
-};

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

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