@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ThemeProvider/utils/theme-tokens.js

@@ -1,160 +0,0 @@
-import PropTypes from 'prop-types';
-import semVerSatisfies from 'semver/functions/satisfies';
-import pkg from '../../../package.json';
-
-/**
- * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
- * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
- */
-
-/**
- * General utilities around working with theme tokens
- */
-
-export const getComponentTheme = (theme, componentName) => {
-  var _theme$metadata;
-  // Give clear and understandable error messages for common dev errors, for example,
-  // typo in component name, missing export or accessing old version of theme
-  if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
-  }
-  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
-  if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
-  }
-  const componentTheme = theme.components[componentName];
-  if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
-  }
-  return componentTheme;
-};
-export const doesThemeConditionApply = (_ref, appearances) => {
-  let [key, value] = _ref;
-  // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
-  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
-};
-export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
-
-/**
- * Turns a tokens prop (which may be either a tokens object or a tokens getter function)
- * into one resolved tokens object, based on current appearances state.
- *
- * This is used inside `useThemeTokens` and `useThemeTokensCallback` for handling the `tokens`
- * props of themed components. It may also be used directly in cases where a non-themed component
- * needs to resolve a tokens prop that may be a tokens getter function or a resolved tokens object.
- *
- * A second tokens prop of tokens overrides may optionally be passed; it will be resolved to an object
- * based on provided appearance state and then shallow-merged over the first set of tokens.
- *
- * @param {TokensProp} defaultTokens - a set of tokens or tokens getter function which may be overridden
- * @param {AppearanceSet} [appearances] - optional appearance set to pass to tokens getter functions
- * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
- * @returns {TokensSet} - object containing resolved tokens with overrides applied
- */
-export const resolveThemeTokens = function (defaultTokens) {
-  let appearances = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let tokenOverrides = arguments.length > 2 ? arguments[2] : undefined;
-  const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
-  if (!tokenOverrides) return resolve(defaultTokens);
-  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, _ref2) => {
-    let [tokenName, tokenValue] = _ref2;
-    return tokenValue === undefined ? mergedTokens : {
-      ...mergedTokens,
-      [tokenName]: tokenValue
-    };
-  }, resolve(defaultTokens));
-};
-
-/**
- * Gives a prop types error if a set of resolved tokens doesn't match a provided prop
- * types validator.
- *
- * In production, this is a no-op (PropTypes.checkPropTypes is automatically replaced
- * with a no-op function).
- *
- * @param {TokensSet} themeTokens - object containing resolved theme tokens
- * @param {function} validator - PropTypes validator function
- * @param {string} componentName - identifier to display in PropType error messages
- */
-export const validateThemeTokens = (themeTokens, validator, componentName) => {
-  PropTypes.checkPropTypes({
-    tokens: validator
-  }, {
-    tokens: themeTokens
-  }, 'resolved token', componentName);
-  return themeTokens;
-};
-
-/**
- * Merges variants over states. Must be merged in that order to allow static showcases of a state,
- * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
- * Returns an empty object if both variants and states are undefined.
- *
- * @param {AppearanceSet} [variants]
- * @param {AppearanceSet} [states]
- * @returns {AppearanceSet}
- */
-export const mergeAppearances = function () {
-  let variants = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let states = arguments.length > 1 ? arguments[1] : undefined;
-  return states ? {
-    ...states,
-    ...variants
-  } : variants;
-};
-
-/**
- * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
- *
- * This is used internally in `useThemeTokens` and `useThemeTokensCallback` and should not normally be called directly.
- *
- * @param {object} componentTheme - object containing a theme's `tokens` and `rules` for a component
- * @param {object|function} [tokensProp] - UDS tokens prop containing theming overrides
- * @param {object} [variants] - UDS variant prop containing the variant options for this component instance
- * @param {object} [states] - object containing current state options for this component instance
- * @returns {object} Set of resolved theme tokens
- */
-export const getThemeTokens = function (_ref3, tokensProp) {
-  let {
-    rules = [],
-    tokens: defaultThemeTokens = {}
-  } = _ref3;
-  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let states = arguments.length > 3 ? arguments[3] : undefined;
-  const appearances = mergeAppearances(variants, states);
-  // TODO: if in dev mode, validate the appearances and provided propTokens
-
-  // Get the theme's default tokens set and merge tokens from applicable theme rules over it
-  const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? {
-    ...mergedTokens,
-    ...rule.tokens
-  } : mergedTokens, defaultThemeTokens);
-  return resolveThemeTokens(themeTokens, appearances, tokensProp);
-};
-export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
-
-/**
- * Throws an error if the theme was built with an incompatible version of @telus-uds/system-theme-tokens
- *
- * This is used internally by the ThemeProvider to force a fast failure when an incompatible version is detected.
- *
- * Version compatibility is calculated with semver.satisfies.
- * Refer to https://github.com/npm/node-semver and https://semver.npmjs.com/ for details about how
- * semver compatibility.
- *
- * @param {object} theme - UDS theme built for react-native
- */
-export const validateThemeTokensVersion = theme => {
-  var _theme$metadata2;
-  const expectedThemeTokensVersion = pkg.dependencies['@telus-uds/system-theme-tokens'];
-  const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
-  if (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${pkg.name} v${pkg.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
-
-If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`);
-  }
-};

package/lib-module/Timeline/Timeline.js

@@ -1,168 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectDotStyles = _ref => {
-  let {
-    dotWidth,
-    timelineColor,
-    dotBorderWidth,
-    dotColor
-  } = _ref;
-  return {
-    width: dotWidth,
-    height: dotWidth,
-    borderRadius: dotWidth / 2,
-    backgroundColor: dotColor,
-    borderWidth: dotBorderWidth,
-    borderColor: timelineColor
-  };
-};
-const selectConnectorStyles = _ref2 => {
-  let {
-    timelineConnectorColor,
-    connectorHeight,
-    connectorWidth
-  } = _ref2;
-  return {
-    width: connectorWidth,
-    height: connectorHeight,
-    backgroundColor: timelineConnectorColor
-  };
-};
-const selectTimelineContainerStyle = _ref3 => {
-  let {
-    timelineContainerDirection
-  } = _ref3;
-  return {
-    flexDirection: timelineContainerDirection
-  };
-};
-const selectLineItemStyles = _ref4 => {
-  let {
-    lineItemAlign,
-    lineItemDirection,
-    lineItemMarginBottom,
-    lineItemMarginRight
-  } = _ref4;
-  return {
-    alignItems: lineItemAlign,
-    flexDirection: lineItemDirection,
-    marginBottom: lineItemMarginBottom,
-    marginRight: lineItemMarginRight,
-    overflow: 'hidden'
-  };
-};
-const selectLineItemContainer = _ref5 => {
-  let {
-    lineItemContainerDirection,
-    lineContainerFlexSize
-  } = _ref5;
-  return {
-    flexDirection: lineItemContainerDirection,
-    flex: lineContainerFlexSize
-  };
-};
-const selectItemContentStyles = (_ref6, isLastChild) => {
-  let {
-    itemContentFlexSize,
-    itemContentMarginBottom,
-    itemContentMarginRight
-  } = _ref6;
-  return {
-    flex: itemContentFlexSize,
-    marginBottom: !isLastChild && itemContentMarginBottom,
-    marginRight: !isLastChild && itemContentMarginRight
-  };
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * Timeline is a component that displays either a horizontal or vertical list of the
- * children components passed by props
- *
- * ## Component API
- *
- * - `horizontal` In order to display the Component list horizontally
- *
- *
- * ## A11y guidelines
- * Timeline link supports all the common a11y props.
- */
-const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let {
-    tokens,
-    variant = {},
-    children,
-    accessibilityLabel,
-    tag = 'ul',
-    childrenTag = 'li',
-    ...rest
-  } = _ref7;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Timeline', tokens, variant, {
-    viewport
-  });
-  const containerProps = {
-    ...selectProps(rest),
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
-    accessibilityLabel
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ...containerProps,
-    ref: ref,
-    style: selectTimelineContainerStyle(themeTokens),
-    children: children.map((child, index) => {
-      var _child$props;
-      const childrenProps = {
-        ...getA11yPropsFromHtmlTag(childrenTag, (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || 'listitem')
-      };
-      return /*#__PURE__*/_jsxs(View, {
-        style: selectLineItemContainer(themeTokens)
-        // eslint-disable-next-line react/no-array-index-key
-        ,
-        ...childrenProps,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: selectLineItemStyles(themeTokens),
-          children: [/*#__PURE__*/_jsx(View, {
-            style: selectDotStyles(themeTokens)
-          }), /*#__PURE__*/_jsx(View, {
-            style: selectConnectorStyles(themeTokens)
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
-          children: child
-        })]
-      }, `timeline-${index}-${child.displayName}`);
-    })
-  });
-});
-Timeline.displayName = 'Timeline';
-Timeline.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Timeline'),
-  variant: variantProp.propType,
-  /**
-   * A list of components that will be rendered either horizontally or vertically
-   */
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  /**
-   * A required accessibility label that needs to be passed to be used on List
-   * which is applied as normal for a React Native accessibilityLabel prop.
-   */
-  accessibilityLabel: PropTypes.string.isRequired,
-  /**
-   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
-   * and `'ul'` for the container
-   *
-   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
-   *
-   */
-  tag: PropTypes.oneOf(layoutTags),
-  childrenTag: PropTypes.oneOf(layoutTags)
-};
-export default Timeline;

package/lib-module/Timeline/index.js

@@ -1,2 +0,0 @@
-import Timeline from './Timeline';
-export default Timeline;

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -1,280 +0,0 @@
-import React 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 View from "react-native-web/dist/exports/View";
-import InputLabel from '../InputLabel';
-import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
-import { useInputValue } from '../utils/input';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-
-// We need to drop the icon before passing it to the `ButtonBase`, because it's
-// being handled separately in this case
-const selectButtonTokens = (_ref, _ref2) => {
-  let {
-    icon: _,
-    ...tokens
-  } = _ref;
-  let {
-    trackHeight,
-    outerBorderGapButton
-  } = _ref2;
-  return selectTokens('Button', {
-    ...tokens,
-    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-    outerBorderGap: outerBorderGapButton,
-    height: trackHeight,
-    width: null
-  });
-};
-
-// Map and rename icon-specific tokens to name used within Icon
-const selectIconTokens = _ref3 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref3;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-const selectTrackSwitchStyles = _ref4 => {
-  let {
-    switchSize,
-    width,
-    trackHeight
-  } = _ref4;
-  return {
-    width,
-    height: Math.max(switchSize, trackHeight)
-  };
-};
-const selectTrackStyles = _ref5 => {
-  let {
-    trackBorderWidth,
-    trackBorderColor,
-    trackBorderRadius,
-    width
-  } = _ref5;
-  return {
-    borderWidth: trackBorderWidth,
-    borderColor: trackBorderColor,
-    borderRadius: trackBorderRadius,
-    width
-  };
-};
-const selectSwitchStyles = _ref6 => {
-  let {
-    switchSize,
-    switchColor,
-    switchBorderWidth,
-    switchBorderColor,
-    switchBorderRadius,
-    switchShadow
-  } = _ref6;
-  return {
-    position: 'absolute',
-    width: switchSize,
-    height: switchSize,
-    backgroundColor: switchColor,
-    borderWidth: switchBorderWidth,
-    borderColor: switchBorderColor,
-    borderRadius: switchBorderRadius,
-    ...applyShadowToken(switchShadow),
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: {
-        transition: 'transform 200ms'
-      }
-    })
-  };
-};
-const selectLabelStyles = _ref7 => {
-  let {
-    labelMarginLeft
-  } = _ref7;
-  return {
-    marginLeft: labelMarginLeft
-  };
-};
-const selectLabelTokens = _ref8 => {
-  let {
-    labelColor,
-    labelFontName,
-    labelFontSize,
-    labelFontWeight,
-    labelLineHeight
-  } = _ref8;
-  return {
-    color: labelColor,
-    fontName: labelFontName,
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight
-  };
-};
-const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
-  let {
-    copy = 'en',
-    value,
-    initialValue,
-    onChange,
-    id,
-    label,
-    inactive,
-    tokens,
-    tooltip,
-    variant,
-    accessibilityRole = 'switch',
-    accessibilityLabel = label,
-    ...rest
-  } = _ref9;
-  const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
-  const themeTokens = getTokens();
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-  const handlePress = event => setValue(!currentValue, event);
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState), getTokens(themeTokens));
-  const uniqueId = useUniqueId('toggleSwitch');
-  const inputId = id ?? uniqueId;
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: themeTokens.space,
-    direction: "row",
-    tokens: {
-      alignItems: 'center'
-    },
-    children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
-      style: [selectLabelStyles(themeTokens), staticStyles.containText],
-      children: /*#__PURE__*/_jsx(InputLabel, {
-        copy: copy,
-        forId: inputId,
-        label: label,
-        tokens: selectLabelTokens(themeTokens),
-        tooltip: tooltip
-      })
-    }), /*#__PURE__*/_jsx(ButtonBase, {
-      id: id,
-      ref: ref,
-      selected: currentValue,
-      inactive: inactive,
-      tokens: getButtonTokens,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityRole: accessibilityRole,
-      accessibilityState: {
-        checked: currentValue
-      },
-      onPress: handlePress,
-      ...selectProps(rest),
-      children: buttonState => {
-        const stateTokens = getTokens(buttonState);
-        const IconComponent = stateTokens.icon;
-        const switchStyles = selectSwitchStyles(stateTokens);
-        const trackStyles = selectTrackStyles(stateTokens);
-        const iconTokens = selectIconTokens(stateTokens);
-        const trackSwitchStyles = selectTrackSwitchStyles(stateTokens);
-        const {
-          switchSize,
-          trackHeight,
-          width,
-          trackBorderWidth
-        } = stateTokens;
-        // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-        // Two different translates depending on the switchSize and trackSize relationship.
-        const isSwitchTallerThanTrack = switchSize >= trackHeight;
-        const slideStart = isSwitchTallerThanTrack ? 0 : trackBorderWidth;
-        const slideEnd = isSwitchTallerThanTrack ? width - switchSize : width - switchSize - trackBorderWidth;
-        const switchOffset = buttonState.selected ? slideEnd : slideStart;
-        const switchPositionStyle = {
-          transform: [{
-            translateX: switchOffset
-          }]
-        };
-        return /*#__PURE__*/_jsxs(View, {
-          nativeID: "trackSwitch",
-          style: [trackSwitchStyles, staticStyles.trackSwitch],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [staticStyles.track, trackStyles]
-          }), /*#__PURE__*/_jsx(View, {
-            style: [staticStyles.switch, switchStyles, switchPositionStyle],
-            children: IconComponent && /*#__PURE__*/_jsx(IconComponent, {
-              ...iconTokens
-            })
-          })]
-        });
-      }
-    })]
-  });
-});
-ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  tokens: getTokensPropType('ToggleSwitch'),
-  variant: variantProp.propType,
-  /**
-   * If this is a "controlled" component and a parent handles its selected state,
-   * tells the switch if it is on (true) or off (false).
-   */
-  value: PropTypes.bool,
-  /**
-   * If this is an "uncontrolled" component that handles its own selected state,
-   * optionally tells the switch if it should default to on (true) or off (false).
-   */
-  initialValue: PropTypes.bool,
-  /**
-   * Function called when the switch is toggled, with one boolean argument that is the
-   * new position of the switch, on (true) or off (false). For "controlled" components,
-   * this should always be passed and used to control the state of the switch.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Input ID.
-   */
-  id: PropTypes.string,
-  /**
-   * An optional label.
-   */
-  label: PropTypes.string,
-  /**
-   * If passed, the switch does not respond to user input and may recieve different
-   * theme tokens if the theme supports inactive appearance.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  track: {
-    flexDirection: 'row'
-  },
-  switch: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  containText: {
-    flexShrink: 1
-  },
-  trackSwitch: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  }
-});
-export default ToggleSwitch;