@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8

package/src/Tabs/itemPositions.js

@@ -0,0 +1,101 @@
+import { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+// Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
+
+/**
+ * @typedef ItemPositionPosition
+ * @property {number} [ItemPositionItem.start] - optional theme scale variants e.g. compact, wide
+ * @property {number} [ItemPositionItem.end] - optional override to force a particular pixel size
+ *
+ * @typedef {Object.<number, ItemPositionItem>} ItemPositionPositions - ref object of start/end coordinates
+ *
+ * @typedef ItemPositions
+ * @property {number} ItemPositions.contentWidth - current width of potentially-overflowing content inside scrollable
+ * @property {number} ItemPositions.containerWidth - current width of non-overflowing outer scroll container
+ * @property {number} ItemPositions.scrollOffset - current x position of the left edge of the visible section of the scrollable content
+ * @property {ItemPositionPositions} ItemPositions.positions - `{ start, end }` coordinates of each scrollable content item, by index
+ * @property {(targetX: number) => void)} ItemPositions.scrollTo - function to scroll to a co-ordinate, applying scrolling logic
+ * @property {() => void)} ItemPositions.setIsReady - function to call when layout has been calculated and itemPositions data is ready
+ */
+
+/**
+ * Takes a desired scroll target coordinate and returns a valid coordinate
+ * that, when not scrolling to one end or another, snaps to the start of an item,
+ * making sure any "scroll back" button doesn't overlap the first item.
+ *
+ * @param {number} x - the intended coordinate to scroll to
+ * @param {number} scrollMax - the highest posible coordinate to scroll to
+ * @param {ItemPositionPositions} positions - positions list from `useItemPositions` ref
+ * @param {number} [buttonClearance] - offset to allow space for a button
+ * @returns {number}
+ */
+export const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance = 0) => {
+  if (x <= 0) return 0
+  if (x >= scrollMax) return scrollMax
+
+  // If not scrolling all the way to the start or end, stop
+  // where the first item is not coverred by the scroll previous button
+  const targetItem = Object.values(positions).find(({ start, end }) => start <= x && end > x)
+
+  // If there's no target item we're landing at a gap between items
+  const targetX = targetItem ? targetItem.start : x
+  return Math.max(0, targetX - buttonClearance)
+}
+
+/**
+ * Returns a handler for React Native's `onLayout` which updates the values of
+ * the ref object returned from `useItemPositions`.
+ *
+ * @param {ItemPositionPositions} positions
+ * @param {number} index
+ * @returns {function}
+ */
+export const getItemPositionLayoutHandler = (positions, index) => {
+  const handleLayout = ({
+    nativeEvent: {
+      layout: { width, x }
+    }
+  }) => {
+    /* eslint-disable-next-line no-param-reassign */
+    positions[index] = { start: x, end: x + width }
+  }
+  return handleLayout
+}
+
+/**
+ * Wrapper for `useRef` which gives a mutable object in which item start/end coordinates,
+ * scrollTo method and content/container widths may be set and updated without causing a re-render.
+ *
+ * @returns {[ItemPositions, isReady: bool]} tuple array of:
+ *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
+ *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
+ */
+export const useItemPositions = () => {
+  const [isReady, setIsReady] = useState(false)
+  return [
+    useRef({
+      positions: {},
+      scrollTo: () => {},
+      contentWidth: 0,
+      containerWidth: 0,
+      scrollOffset: 0,
+      setIsReady
+    }).current,
+    isReady
+  ]
+}
+
+/**
+ * PropType for the ref object returned by `useItemPositions`
+ */
+export const itemPositionsPropType = PropTypes.exact({
+  positions: PropTypes.objectOf(
+    PropTypes.shape({ start: PropTypes.number, end: PropTypes.number })
+  ),
+  scrollTo: PropTypes.func,
+  contentWidth: PropTypes.number,
+  containerWidth: PropTypes.number,
+  scrollOffset: PropTypes.number,
+  setIsReady: PropTypes.func
+})

package/src/Tags/Tags.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Platform, Text, View } from 'react-native'
 
 import ButtonBase from '../Button/ButtonBase'
+import Icon from '../Icon'
 import { StackWrap, getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -134,7 +135,7 @@ const Tags = ({
 
               const iconContent = IconComponent ? (
                 <View style={iconWrapperStyle}>
-                  <IconComponent tokens={iconTokens} />
+                  <Icon icon={IconComponent} tokens={iconTokens} />
                 </View>
               ) : null
               const textContent = <Text style={textStyles}>{label}</Text>

package/src/TextInput/TextInputBase.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { getTokensPropType, useInputValue, variantProp } from '../utils'
 
 const selectInputStyles = (
@@ -76,27 +76,17 @@ const selectInputStyles = (
 
 const selectOuterBorderStyles = ({
   outerBackgroundColor,
-  outerBorderWidth = 0,
+  outerBorderWidth,
   outerBorderColor,
-  outerBorderRadius = 0
-}) => {
-  // Use negative margins so that the outer border doesn't expand the input's bounding box
-  const margin = -1 * outerBorderWidth
-
-  // Account for the border width since we style it as an outline
-  const borderRadius = outerBorderRadius + outerBorderWidth
-
-  return {
-    background: outerBackgroundColor,
-    borderWidth: outerBorderWidth,
-    borderColor: outerBorderColor,
-    borderRadius,
-    marginTop: margin,
-    marginBottom: margin,
-    marginLeft: margin,
-    marginRight: margin
-  }
-}
+  borderRadius
+}) => ({
+  background: outerBackgroundColor,
+  ...applyOuterBorder({
+    outerBorderColor,
+    outerBorderWidth,
+    borderRadius
+  })
+})
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -186,7 +176,7 @@ function TextInputBase({
           pointerEvents="none" // avoid hijacking input press events
           style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
         >
-          <IconComponent tokens={selectIconTokens(themeTokens)} />
+          <IconComponent {...selectIconTokens(themeTokens)} />
         </View>
       )}
     </View>

package/src/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import useTheme from './useTheme'
-import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } from './utils'
+import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils'
 /**
  * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
@@ -98,7 +98,7 @@ export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}
   const getThemeTokensCallback = useCallback(
     (states, tokenOverrides) => {
       const appearances = mergeAppearances(variants, states)
-      const resolvedTokens = resolveTokens(tokens, tokenOverrides, appearances)
+      const resolvedTokens = resolveThemeTokens(tokens, appearances, tokenOverrides)
       return getThemeTokens(componentTheme, resolvedTokens, appearances)
     },
     [componentTheme, tokens, variants]

package/src/ThemeProvider/utils/styles.js

@@ -9,6 +9,7 @@ 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',
@@ -27,7 +28,7 @@ export function applyTextStyles({
     styles.lineHeight = lineHeight * (fontSize || fontBasePixels)
   }
 
-  if (typeof letterSpacing === 'number') {
+  if (typeof letterSpacing === 'number' && letterSpacing) {
     // Same as for line heights - React Native expects absolute letter spacing value
     styles.letterSpacing = letterSpacing * (fontSize || fontBasePixels)
   }
@@ -133,7 +134,19 @@ export function verticalAlignRow(verticalAlign, reverse = false) {
   }
 }
 
-// React Native Views behave like flex blocks. There's no CSS 'display' and they can't inline themselves
-export function applyLayoutStyles() {
-  // TODO: map design tokens to styles that implement inline, stretch, center, etc
-}
+/**
+ * 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
+})

package/src/ThemeProvider/utils/theme-tokens.js

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types'
+
 /**
  * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
@@ -37,15 +39,22 @@ export const doesThemeRuleApply = (rule, appearances) =>
   Object.entries(rule.if).every((condition) => doesThemeConditionApply(condition, appearances))
 
 /**
- * Turns a tokens prop and an optional tokens override prop (either or both of which may be a tokens getter function)
- * into one tokens set object where overrides are applied over the resolved default tokens.
+ * 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 {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
  * @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 resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) => {
+export const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
   const resolve = (tokens) => (typeof tokens === 'function' ? tokens(appearances) : tokens)
   if (!tokenOverrides) return resolve(defaultTokens)
 
@@ -56,6 +65,27 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
   )
 }
 
+/**
+ * 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.
@@ -68,6 +98,17 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
 export const mergeAppearances = (variants = {}, states) =>
   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 = (
   { rules = [], tokens: defaultThemeTokens = {} },
   tokensProp,
@@ -88,7 +129,7 @@ export const getThemeTokens = (
         : mergedTokens,
     defaultThemeTokens
   )
-  return resolveTokens(themeTokens, tokensProp, appearances)
+  return resolveThemeTokens(themeTokens, appearances, tokensProp)
 }
 
 export const toArray = (strOrArr) => (Array.isArray(strOrArr) ? strOrArr : [strOrArr])

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -21,8 +21,7 @@ const selectButtonTokens = (tokens) =>
   })
 
 // Map and rename icon-specific tokens to name used within Icon
-const selectIconTokens = ({ iconSize, iconColor, iconOpacity }) => ({
-  opacity: iconOpacity,
+const selectIconTokens = ({ iconSize, iconColor }) => ({
   size: iconSize,
   color: iconColor
 })
@@ -103,7 +102,7 @@ const ToggleSwitch = ({
         return (
           <View style={[staticStyles.track, trackStyles]}>
             <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
-              {IconComponent && <IconComponent tokens={iconTokens} />}
+              {IconComponent && <IconComponent {...iconTokens} />}
             </View>
           </View>
         )

package/src/Tooltip/Tooltip.jsx

@@ -81,7 +81,7 @@ const selectArrowStyles = (
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
 const defaultControl = (pressableState, variant) => (
-  <TooltipButton variant={{ ...pressableState, ...variant }} />
+  <TooltipButton pressableState={pressableState} variant={variant} />
 )
 
 /**

package/src/TooltipButton/TooltipButton.jsx

@@ -1,51 +1,47 @@
 import React from 'react'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import PropTypes from 'prop-types'
+import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
+import Icon from '../Icon'
 
-const selectOuterContainerStyles = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  outerBorderRadius
-}) => {
-  const outerBorderOffset = -1 * (outerBorderWidth + outerBorderGap)
-
-  return {
-    marginTop: outerBorderOffset,
-    marginLeft: outerBorderOffset,
-    marginRight: outerBorderOffset,
-    marginBottom: outerBorderOffset,
-    borderColor: outerBorderColor,
-    borderWidth: outerBorderWidth,
-    padding: outerBorderGap,
-    borderRadius: outerBorderRadius
-  }
-}
 const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
 
-const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
+const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
   size: iconSize,
-  color: iconColor,
-  scale: iconScale
+  color: iconColor
+  // scale: iconScale TODO re-enable with icon component
 })
 
-const TooltipButton = ({ tokens, variant }) => {
-  const themeTokens = useThemeTokens('TooltipButton', tokens, variant)
+/**
+ * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
+ * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
+ * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
+ */
+const TooltipButton = ({ pressableState, tokens, variant }) => {
+  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={selectOuterContainerStyles(themeTokens)}>
+    <View style={applyOuterBorder(themeTokens)}>
       <View style={selectInnerContainerStyles(themeTokens)}>
-        {IconComponent && <IconComponent tokens={selectIconTokens(themeTokens)} />}
+        {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
     </View>
   )
 }
 
 TooltipButton.propTypes = {
+  /**
+   * Used as appearances when resolving theme tokens.
+   */
+  pressableState: PropTypes.shape({
+    pressed: PropTypes.bool,
+    hover: PropTypes.bool,
+    focus: PropTypes.bool
+  }),
   tokens: getTokensPropType('TooltipButton'),
   variant: variantProp.propType
 }

package/src/Typography/Typography.jsx

@@ -23,7 +23,8 @@ const selectTextStyles = ({
   lineHeight,
   fontName,
   textAlign,
-  textTransform
+  textTransform,
+  letterSpacing
 }) =>
   applyTextStyles({
     fontWeight,
@@ -32,7 +33,8 @@ const selectTextStyles = ({
     lineHeight,
     fontName,
     textAlign,
-    textTransform
+    textTransform,
+    letterSpacing
   })
 
 // General-purpose flexible theme-neutral base component for text
@@ -57,9 +59,8 @@ const Typography = ({
   const a11y = {
     ...a11yProps.select(rest),
     accessibilityRole,
-    // On React Native Web, `aria-level` controls which heading tag (h1, h2 etc) is used.
-    // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
-    [headingLevel && 'aria-level']: headingLevel
+    // On React Native Web, `accessibilityLevel` controls which heading tag (h1, h2 etc) is used.
+    ...(headingLevel && { accessibilityLevel: headingLevel })
   }
 
   return block ? (

package/src/index.js

@@ -2,24 +2,36 @@ export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Box } from './Box'
 export * from './Button'
-export { default as Card } from './Card'
+export { default as Card, PressableCardBase } from './Card'
 export { default as Checkbox } from './Checkbox'
+export * from './Checkbox'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
+export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
 export { default as Icon } from './Icon'
 export * from './Icon'
+export { default as InputLabel } from './InputLabel'
 export * from './Link'
 export { default as List } from './List'
+export { default as Modal } from './Modal'
+export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
+export { default as Progress } from './Progress'
 export { default as Radio } from './Radio'
+export * from './Radio'
+export { default as RadioCard } from './RadioCard'
+export * from './RadioCard'
+export { default as Search } from './Search'
 export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'
 export { default as Skeleton } from './Skeleton'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'
+export { default as StepTracker } from './StepTracker'
+export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'
 export * from './TextInput'
 export { default as ToggleSwitch } from './ToggleSwitch'
@@ -30,6 +42,12 @@ export { default as Typography } from './Typography'
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { default as ViewportProvider, useViewport } from './ViewportProvider'
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider'
+export {
+  default as ThemeProvider,
+  useTheme,
+  useSetTheme,
+  useThemeTokens,
+  getThemeTokens
+} from './ThemeProvider'
 
 export * from './utils'

package/src/utils/children.jsx

@@ -0,0 +1,66 @@
+import React, { Children, Fragment } from 'react'
+import { Text } from 'react-native'
+
+/**
+ * Unpacks top-level fragments, so that common compositional patterns such as the following examples
+ * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
+ *
+ * - Setting `children` as a property wrapped in a fragment:
+ *
+ * ```jsx
+ * args.children = <><Child1 /><Child2 /><Child3 /></>
+ * ```
+ *
+ * - Defining `children` as a variable wrapped in a fragment:
+ *
+ * ```jsx
+ * const content = <><Child1 /><Child2 /><Child3 /></>
+ * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
+ * ```
+ *
+ * - Using fragments at the top level of a JSX block for conditional rendering:
+ *
+ * ```jsx
+ * <Child1 />
+ * {someCondition && (
+ *   <>
+ *     <Child2 />
+ *     <Child3 />
+ *   </>
+ * )}
+ * ```
+ *
+ * @param {ReactChildren} child
+ * @returns {ReactChildren}
+ */
+export const unpackFragment = (child) => {
+  // If this level is a set of top-level siblings rather than one child, check each in turn
+  if (Children.count(child) > 1) return Children.map(child, unpackFragment)
+
+  // When a fragment is found, unpack its children to the top level and check them
+  if (child?.type === Fragment) return unpackFragment(child.props?.children)
+
+  // Stop unpacking as soon as any non-fragment child is found
+  return child
+}
+
+/**
+ * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
+ * text style inheritance isn't as expected.
+ *
+ * Call this function on children that may contain text (strings or numbers) at the top level,
+ * and any that are found will be wrapped in a React Native `<Text>` element with supplied props.
+ *
+ * Note that this does not wrap strings that are nested children of the top level children:
+ * `wrapStringsInText(<View>Some text</View>)` will not wrap the inner text and will still crash,
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` will wrap the strings in the fragment.
+ *
+ * @param {ReactChildren} children
+ * @param {TextProps} props
+ * @returns {ReactChildren}
+ */
+export const wrapStringsInText = (children, props = {}) => {
+  return Children.map(unpackFragment(children), (child) =>
+    typeof child === 'string' || typeof child === 'number' ? <Text {...props}>{child}</Text> : child
+  )
+}

package/src/utils/index.js

@@ -1,10 +1,13 @@
 export * from './a11y'
 export * from './animation'
+export * from './children'
 export * from './input'
 export * from './pressability'
 export * from './propTypes'
 
 export { default as info } from './info'
+export { default as useCopy } from './useCopy'
+export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'

package/src/utils/info/platform/platform.js

@@ -0,0 +1 @@
+export default '.web (default)'

package/src/utils/info/versions.js

@@ -1,6 +1,6 @@
-import { version } from '../../../package.json'
+import pkgJson from '../../../package.json'
 
 // Add more versions if they are useful e.g. theme schema version
 export default {
-  uds: version
+  uds: pkgJson.version
 }