@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/TextInput/TextInputBase.js

@@ -1,233 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-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 PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
-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 = ({
-  backgroundColor,
-  color,
-  borderWidth = 0,
-  borderColor,
-  borderRadius,
-  paddingTop = 0,
-  paddingBottom = 0,
-  paddingLeft,
-  paddingRight = 0,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0,
-  minLines,
-  maxLines,
-  width,
-  height
-}, inactive) => {
-  // 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
-  });
-
-  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 = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...applyOuterBorder({
-    outerBorderColor,
-    outerBorderWidth,
-    borderRadius
-  })
-});
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
-
-const selectIconContainerStyles = ({
-  paddingRight,
-  paddingBottom
-}) => ({
-  paddingRight,
-  paddingBottom
-});
-
-const TextInputBase = /*#__PURE__*/forwardRef(({
-  value,
-  height,
-  initialValue,
-  inactive,
-  readOnly,
-  onChange,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
-  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 {
-    currentValue,
-    setValue,
-    isControlled
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  });
-
-  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 {
-    icon: IconComponent
-  } = themeTokens;
-  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 nativeInputStyle = selectInputStyles({ ...themeTokens,
-    height
-  }, inactive);
-  return /*#__PURE__*/_jsxs(View, {
-    style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/_jsx(NativeTextInput, {
-      ref: ref,
-      style: nativeInputStyle,
-      ...inputProps
-    }), IconComponent && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none" // avoid hijacking input press events
-      ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
-      })
-    })]
-  });
-});
-TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: PropTypes.string,
-  height: PropTypes.number,
-  initialValue: PropTypes.string,
-  inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  onChange: PropTypes.func,
-  onChangeText: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  tokens: getTokensPropType('TextInput', 'TextArea'),
-  variant: variantProp.propType
-};
-export default TextInputBase;
-const staticStyles = StyleSheet.create({
-  iconContainer: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0
-  }
-});

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,37 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-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,
-  ...Platform.select({
-    web: {
-      pattern: PropTypes.string
-    }
-  })
-};
-export default textInputPropTypes;

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,35 +0,0 @@
-import React, { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
-import { validateThemeTokensVersion } from './utils';
-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);
-
-const ThemeProvider = ({
-  children,
-  defaultTheme
-}) => {
-  const [theme, setTheme] = useState(defaultTheme); // 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,
-      children: children
-    })
-  });
-};
-
-ThemeProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  defaultTheme: PropTypes.shape({
-    metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
-    }).isRequired
-  }).isRequired
-};
-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,22 +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((oldTheme = {}) => ({ ...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,105 +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 = (componentName, tokens = {}, variants = {}, states = {}) => {
-  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 = (componentName, tokens = {}, variants = {}) => {
-  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';

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

@@ -1,174 +0,0 @@
-/**
- * React-Native specific implementations of style patterns that
- * don't map directly to cross-platform design token values.
- */
-import Platform from "react-native-web/dist/exports/Platform";
-import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tokens fit React Native's text styles' specific requirements and quirks
-
-export function applyTextStyles({
-  fontSize,
-  fontScaleCap,
-  lineHeight,
-  letterSpacing,
-  fontWeight = '400',
-  fontName,
-  fontStyle = 'normal',
-  ...rest
-}) {
-  const styles = { ...rest
-  };
-
-  if (fontSize) {
-    // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize;
-  }
-
-  if (typeof lineHeight === 'number') {
-    // React Native expects absolute line heights but multipliers are better as design tokens
-    styles.lineHeight = lineHeight * (fontSize || fontBasePixels);
-  }
-
-  if (typeof letterSpacing === 'number' && letterSpacing) {
-    // Same as for line heights - React Native expects absolute letter spacing value
-    styles.letterSpacing = letterSpacing * (fontSize || fontBasePixels);
-  }
-
-  if (fontName) {
-    // Don't set undefined font families. May need some validation here that the font is available.
-    // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
-  } else if (fontWeight) {
-    // If using system default font, apply the font weight directly.
-    // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
-    styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
-  } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
-  // Do while implementing advanced typography e.g. paragraph etc
-  // https://github.com/telus/universal-design-system/issues/89
-
-
-  return styles;
-}
-/**
- * React Native's in-built shadow support is limited. Take an object describing an ideal shadow and
- * return a platform-appropriate implementation that gets close to the described effect.
- *
- * @param {object}  shadowToken
- * @param {boolean} shadowToken.inset
- * @param {color}   shadowToken.string
- * @param {number}  shadowToken.offsetX
- * @param {number}  shadowToken.offsetY
- * @param {number}  shadowToken.blur
- * @param {number}  shadowToken.spread
- * @return {object}
- */
-
-export function applyShadowToken(shadowToken) {
-  if (!shadowToken) return {};
-  const applyShadow = Platform.select({
-    web: () => applyWebShadow(shadowToken),
-    ios: () => applyIosShadow(shadowToken),
-    android: () => applyAndroidShadow(shadowToken)
-  });
-  return applyShadow();
-}
-
-function applyWebShadow({
-  inset,
-  color = '',
-  offsetX = 0,
-  offsetY = 0,
-  blur = 0,
-  spread = 0
-}) {
-  const insetString = inset ? 'inset ' : '';
-  const boxShadow = {
-    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
-  };
-  return boxShadow;
-}
-
-function applyAndroidShadow(shadowToken) {
-  const {
-    color,
-    inset,
-    spread,
-    offsetY,
-    offsetX
-  } = shadowToken; // Android shadows are very limited and workarounds are hacky. Use the built-in `elevation` API unless
-  // shadow design is radically different to a simple top-down shadow (e.g. horizontal, upward, or inset)
-
-  if (!inset && offsetY >= 0 && offsetY >= offsetX) {
-    return {
-      // Can't match other platforms, but can give longer shadows to elements designed for longer shadows
-      elevation: spread + offsetY,
-      shadowColor: color // Only applies on Android >= 9 and React Native >= 0.64.0
-
-    };
-  } // TODO: maybe use a library or workaround to increase capabilities.
-  // https://github.com/telus/universal-design-system/issues/535
-
-
-  return {};
-}
-
-function applyIosShadow({
-  inset,
-  color,
-  offsetX,
-  offsetY,
-  spread,
-  blur
-}) {
-  // React Native iOS doesn't support inset shadows.
-  // TODO: maybe use a library or workaround for inset shadows. This is a sizable task and would
-  // involve changing component implementations to use a custom view, can't be done with styles alone.
-  // https://github.com/telus/universal-design-system/issues/535
-  if (inset) return {}; // React Native iOS doesn't support spread. Where there's an offset, can approximate positive spread by
-  // increasing the (positive or negative) offset by the spread. This makes the shadow reach the point it
-  // would if spread was supported (with a side effect that its start is further "under" the element).
-
-  const nudgeBySpread = offset => {
-    if (!offset || spread <= 0) return 0;
-    return offset > 0 ? spread : spread * -1;
-  };
-
-  return {
-    shadowColor: color,
-    shadowOffset: {
-      width: offsetX + nudgeBySpread(offsetX),
-      height: offsetY + nudgeBySpread(offsetY)
-    },
-    shadowRadius: blur,
-    shadowOpacity: 1 // opacity is applied via RGBA in the `color` token
-
-  };
-}
-
-const verticalAlignToFlexRowAlign = {
-  top: 'flex-start',
-  middle: 'center',
-  bottom: 'flex-end'
-};
-export function verticalAlignRow(verticalAlign, reverse = false) {
-  return {
-    flexDirection: reverse ? 'row-reverse' : 'row',
-    alignItems: verticalAlignToFlexRowAlign[verticalAlign]
-  };
-}
-/**
- * Use on an outer container to create an outer border with an optional gap around it
- * that matches the border radius of any inner border.
- */
-
-export const applyOuterBorder = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  borderRadius = 0
-}) => ({
-  margin: 0 - outerBorderWidth - outerBorderGap,
-  padding: outerBorderGap,
-  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor
-});