@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/Autocomplete/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_MIN_TO_SUGGESTION = 1;
+export const DEFAULT_MAX_SUGGESTIONS = 5;
+export const INPUT_LEFT_PADDING = 16;
+export const MIN_LISTBOX_WIDTH = 288;

package/lib/Autocomplete/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    hasResults: 'Some results are available',
+    loading: 'Searching...',
+    noResults: 'No results found'
+  },
+  fr: {
+    hasResults: 'Quelques suggestions sont disponible',
+    loading: 'Recherche...',
+    noResults: 'Aucun résultat trouvé'
+  }
+};

package/lib/Autocomplete/index.js

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

package/lib/Badge/Badge.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectContainerBackground = _ref => {
+  let {
+    backgroundColor
+  } = _ref;
+  return {
+    backgroundColor
+  };
+};
+const selectContainerBorder = _ref2 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref2;
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius
+  };
+};
+const selectContainerPadding = _ref3 => {
+  let {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = _ref3;
+  return {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  };
+};
+const getTypographyTokens = _ref4 => {
+  let {
+    fontName,
+    fontWeight,
+    color
+  } = _ref4;
+  return {
+    fontName,
+    fontWeight,
+    color
+  };
+};
+const getTypographyVariant = _ref5 => {
+  let {
+    fontSize
+  } = _ref5;
+  return {
+    size: fontSizeMapping[fontSize]
+  };
+};
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const themeTokens = useThemeTokens('Badge', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Typography, {
+      tokens: getTypographyTokens(themeTokens),
+      variant: getTypographyVariant(themeTokens),
+      children: children
+    })
+  });
+});
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: variantProp.propType
+};
+Badge.displayName = 'Badge';
+export default Badge;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'flex-start'
+  }
+});

package/lib/Badge/index.js

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

package/lib/BaseProvider/HydrationContext.js

@@ -1,36 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useHydrationContext = exports.default = exports.HydrationProvider = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const HydrationContext = /*#__PURE__*/(0, _react.createContext)();
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HydrationContext = /*#__PURE__*/React.createContext();
 const isSSR = typeof window === 'undefined';
-
 const hasWebStyleTag = () => {
   var _document;
-
-  if (isSSR || _Platform.default.OS !== 'web' || typeof document !== 'object') {
+  if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
     return false;
   }
-
   return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
 };
+
 /**
  * Returns true if this render cycle is the hydration of existing SSR content.
  *
@@ -38,37 +19,30 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
+export const useHydrationContext = () => React.useContext(HydrationContext);
 
-
-const useHydrationContext = () => (0, _react.useContext)(HydrationContext);
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
-
-
-exports.useHydrationContext = useHydrationContext;
-
-const HydrationProvider = _ref => {
+export const HydrationProvider = _ref => {
   let {
     children
   } = _ref;
-  const [hasMounted, setHasMounted] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+  React.useEffect(() => {
     setHasMounted(true);
-  }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
+  }, []);
 
+  // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
   const valueFromAncestor = useHydrationContext();
-  const isHydrating = valueFromAncestor !== null && valueFromAncestor !== void 0 ? valueFromAncestor : Boolean(!hasMounted && hasWebStyleTag());
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HydrationContext.Provider, {
+  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
+  return /*#__PURE__*/_jsx(HydrationContext.Provider, {
     value: isHydrating,
     children: children
   });
 };
-
-exports.HydrationProvider = HydrationProvider;
 HydrationProvider.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = HydrationProvider;
-exports.default = _default;
+export default HydrationProvider;

package/lib/BaseProvider/index.js

@@ -1,58 +1,41 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _portal = require("@gorhom/portal");
-
-var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
-
-var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
-
-var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-
-var _HydrationContext = require("./HydrationContext");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _ThemeProvider$propTy;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const BaseProvider = _ref => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PortalProvider } from '@gorhom/portal';
+import A11yInfoProvider from '../A11yInfoProvider';
+import ViewportProvider from '../ViewportProvider';
+import ThemeProvider from '../ThemeProvider';
+import { HydrationProvider } from './HydrationContext';
+
+// eslint-disable-next-line no-unused-vars
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     defaultTheme,
     children,
     themeOptions
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HydrationContext.HydrationProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+  return /*#__PURE__*/_jsx(HydrationProvider, {
+    children: /*#__PURE__*/_jsx(A11yInfoProvider, {
+      children: /*#__PURE__*/_jsx(ViewportProvider, {
+        children: /*#__PURE__*/_jsx(ThemeProvider, {
           defaultTheme: defaultTheme,
           themeOptions: themeOptions,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.PortalProvider, {
+          children: /*#__PURE__*/_jsx(PortalProvider, {
             children: children
           })
         })
       })
     })
   });
-};
-
+});
+BaseProvider.displayName = 'BaseProvider';
 BaseProvider.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  themeOptions: _propTypes.default.shape({
-    forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool
+  children: PropTypes.node.isRequired,
+  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool
   })
 };
-var _default = BaseProvider;
-exports.default = _default;
+export default BaseProvider;