@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/src/utils/a11y/semantics.js

@@ -0,0 +1,162 @@
+import { Platform } from 'react-native'
+/**
+ * @typedef {import('react-native').AccessibilityRole} AccessibilityRole
+ */
+
+/**
+ * This is based on the role-to-tag mapping that React Native Web uses to set HTML tags.
+ * It's not exported in any way from RNW, so we need to keep this up-to-date manually.
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+ *
+ * Note: every role in this list is a web-only aria-role. There is no overlap between _these_ web tags
+ * or roles and native accessibilityRoles. Only h1, h2, h3 etc map to an RN equivalent ("heading").
+ *
+ * - RN "summary" native role maps to "region" aria-role, but setting `<section>`/"region" does not
+ *   set React Native's "summary" role, which has a much narrower use case.
+ * - `<Header>`/"Banner" also do not map to RN's "heading". Only h1 / h2 etc map to RN "heading".
+ *
+ * Therefore, all of these tags / roles default to no accessibilityRole in native apps. This is not wrong:
+ * in general, RN accessibilityRoles tend to be more about interaction and less about semantics than web roles.
+ *
+ * RNW's one-way mapping of React Native accessibilityRoles to web aria-roles:
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
+ */
+// Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
+// eslint-disable-next-line prettier/prettier
+const rolesToTags = /** @type {const} */ ({
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+
+  // Add special cases that are in RNW's function logic but not in its mapping object
+  label: 'label'
+  // eslint-disable-next-line prettier/prettier
+})
+
+// Invert React Native Web's mapping, so a tag gets the role that gets that tag
+export const tagsToRoles = Object.fromEntries(
+  Object.entries(rolesToTags).map(([key, value]) => [value, key])
+)
+
+/**
+ * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
+ * to headings on web but without the expectation of a hierarchy of headings within one screen.
+ */
+// eslint-disable-next-line prettier/prettier
+export const headingTags = /** @type {const} */ (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+/**
+ * @typedef {typeof headingTags[number]} HeadingTag
+ */
+
+/**
+ * All HTML tags that may be set via RNW accesibility props alone and therefore may be set using
+ * the getA11yPropsFromHtmlTag function without changing other behaviour.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
+/**
+ * Uses readonly mapping keys/values to generate static types for IDEs that support TS in JSDoc.
+ * @typedef {keyof rolesToTags} RoleWithTag
+ * @typedef {typeof rolesToTags[RoleWithTag] | typeof headingTags[number]} SupportedTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with layout containers like Box.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+// eslint-disable-next-line prettier/prettier
+export const layoutTags = /** @type {const} */ ([
+  ...headingTags,
+  'article',
+  'aside',
+  'blockquote',
+  'footer',
+  'figure',
+  'form',
+  'header',
+  'ul',
+  'li',
+  'main',
+  'nav',
+  'section',
+  'label'
+  // eslint-disable-next-line prettier/prettier
+])
+/**
+ * @typedef {typeof layoutTags[number]} LayoutTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with text elements like Typography.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+// eslint-disable-next-line prettier/prettier
+export const textTags = /** @type {const} */ ([
+  ...headingTags,
+  'blockquote',
+  'code',
+  'del',
+  'em',
+  'ins',
+  'li',
+  'strong',
+  'label'
+  // eslint-disable-next-line prettier/prettier
+])
+/**
+ * @typedef {typeof layoutTags[number]} TextTag
+ */
+
+/**
+ * If passed a heading tag string like 'h1', 'h2' etc, returns the heading number as a number
+ * ready for use in `accessibilityLevel` props and similar.
+ *
+ * @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
+ * @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
+ */
+export const getHeadingLevel = (tag) => (headingTags.includes(tag) ? Number(tag[1]) : undefined)
+
+/**
+ * Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
+ * render that tag.
+ *
+ * For cross-platform apps, a second argument may be passed with an [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole)
+ * to use in native apps. Heading tags (h1, h2, ...h5, h6) map to "heading" role by default;
+ * no other supported semantic HTML tags have an equivalent native accessibilityRole.
+ *
+ * @param {SupportedTag} tag - HTML tag to use on web
+ * @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
+ * @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
+ */
+export const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
+  // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
+  if (nativeRole !== undefined && Platform.OS !== 'web') return { accessibilityRole: nativeRole }
+
+  if (tag) {
+    const accessibilityRole = tagsToRoles[tag]
+    if (accessibilityRole) return { accessibilityRole }
+
+    const accessibilityLevel = getHeadingLevel(tag)
+    if (accessibilityLevel) return { accessibilityRole: 'header', accessibilityLevel }
+  }
+  // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
+  // Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
+  return undefined
+}

package/src/utils/children.jsx

@@ -1,5 +1,6 @@
 import React, { Children, Fragment } from 'react'
 import { Text } from 'react-native'
+import A11yText from '../A11yText'
 
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples
@@ -44,23 +45,75 @@ export const unpackFragment = (child) => {
   return child
 }
 
+const isStringOrNumber = (child) => typeof child === 'string' || typeof child === 'number'
+// Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
+const isWrapable = (child) => isStringOrNumber(child) || child.type === A11yText
+const combineKeys = (childrenArray) =>
+  childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '')
+
+// Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const wrapChild = (child, wrappedText) => {
+  const lastIndex = wrappedText.length - 1
+  // If possible, simplify content by combining text nodes into one string.
+  // jest-native's `.toHaveTextContent` is buggy about array of text nodes in <Text> elements.
+  if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
+    /* eslint-disable-next-line no-param-reassign */
+    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`
+  } else {
+    wrappedText.push(child)
+  }
+}
+
 /**
  * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
- * text style inheritance isn't as expected.
+ * text style inheritance behaves differently with text compared to regular HTML.
  *
  * 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:
+ * Note that this does not wrap strings that are nested children of rendered 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.
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` wraps the strings inside 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
-  )
+export const wrapStringsInText = (children, textProps = {}) => {
+  const childrenArray = unpackFragment(Children.toArray(children))
+
+  // Group adjacent wrapable children together in one Text element to create as few Text elements
+  // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
+  const wrapables = [[]]
+  let wrapablesIndex = 0
+  childrenArray.forEach((child) => {
+    if (isWrapable(child)) {
+      // Make this child a child of the current `Text`
+      wrapChild(child, wrapables[wrapablesIndex])
+    } else {
+      // Close current `Text` and start a new one after this child
+      wrapables.push(child, [])
+      wrapablesIndex += 2
+    }
+  })
+
+  const items = wrapables.reduce((flatChildren, group, index) => {
+    // Skip nullish children and empty arrays
+    if (!group || (Array.isArray(group) && !group.length)) return flatChildren
+
+    return [
+      ...flatChildren,
+      Array.isArray(group) && group.some((child) => isStringOrNumber(child)) ? (
+        // Wrap text nodes and their wrappable neighbours in Text with as stable a key as possible.
+        // Avoid one-item arrays because jest-native's `.toHaveTextContent` is buggy
+        // and sometimes fails to match text content in arrays.
+        <Text key={combineKeys(group) || index} {...textProps}>
+          {group.length === 1 ? group[0] : group}
+        </Text>
+      ) : (
+        group
+      )
+    ]
+  }, [])
+  return items.length === 1 ? items[0] : items
 }

package/src/utils/input.js

@@ -77,16 +77,16 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   valueRef.current.value = currentValue
 
   const setValue = useCallback(
-    (arg) => {
+    (arg, event) => {
       if (readOnly) return
       const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg
-      // Only call onChange if the value actually changed
-      if (onChange && valueRef.current.value !== newValue) onChange(newValue)
       if (!isControlled) setOwnValue(newValue)
+      // Call onChange handler if there's something for it to handle (event or a changed value)
+      if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event)
     },
     [isControlled, onChange, readOnly]
   )
-  const resetValue = useCallback(() => setValue(valueRef.current.initial), [setValue])
+  const resetValue = useCallback((event) => setValue(valueRef.current.initial, event), [setValue])
 
   return { currentValue, setValue, resetValue, isControlled }
 }
@@ -146,23 +146,26 @@ export const useMultipleInputValues = ({
   )
   const currentValues = enforceMaxValues(currentValue)
 
-  const setValues = useCallback((newValues) => setValue(enforceMaxValues(newValues)), [
-    setValue,
-    enforceMaxValues
-  ])
+  const setValues = useCallback(
+    (newValues, event) => {
+      const validNewValues = enforceMaxValues(newValues)
+      setValue(validNewValues, event)
+    },
+    [setValue, enforceMaxValues]
+  )
 
   const resetValues = resetValue
-  const unsetValues = useCallback(() => setValues([]), [setValues])
+  const unsetValues = useCallback((event) => setValues([], event), [setValues])
   const toggleOneValue = useCallback(
-    (newValue) => {
+    (newValue, event) => {
       if (readOnly) return
-      setValues(
-        // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
-        // a deepEqual() function if there's any use case for toggling stored objects or arrays.
-        currentValues.includes(newValue)
-          ? currentValues.filter((oldValue) => oldValue !== newValue)
-          : [...currentValues, newValue]
-      )
+      // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+      // a deepEqual() function if there's any use case for toggling stored objects or arrays.
+      const newValues = currentValues.includes(newValue)
+        ? currentValues.filter((oldValue) => oldValue !== newValue)
+        : [...currentValues, newValue]
+
+      setValues(newValues, event)
     },
     [currentValues, readOnly, setValues]
   )

package/src/utils/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { Linking, Platform } from 'react-native'
-import { components as tokenKeys } from '@telus-uds/system-themes/schema'
+import { components as tokenKeys } from '@telus-uds/system-theme-tokens'
+import a11yPropTypes from './a11y/propTypes'
 
 export const paddingProp = {
   propType: PropTypes.shape({
@@ -51,11 +52,11 @@ const tokenValue = PropTypes.oneOfType([
 const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)])
 
 export const getTokenNames = (componentName) => {
-  const componentTokenNames = tokenKeys[componentName]
-  if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-themes/schema`)
+  const componentTokenSchema = tokenKeys[componentName]
+  if (!componentTokenSchema) {
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`)
   }
-  return componentTokenNames
+  return Object.keys(componentTokenSchema)
 }
 
 /**
@@ -202,44 +203,6 @@ function getPropSelector(propTypes, regexp) {
     )
 }
 
-// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-const a11yPropTypes = {
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      label: PropTypes.string
-    })
-  ),
-  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
-  }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
-  }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func
-}
-
 export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -337,8 +300,11 @@ const pressPropTypes = {
   ...pressHandlerPropTypes,
   disabled: PropTypes.bool,
   ...Platform.select({
-    hitSlop: PropTypes.number,
-    pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
+    web: {},
+    default: {
+      hitSlop: PropTypes.number,
+      pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
+    }
   })
 }
 
@@ -371,29 +337,32 @@ export const linkProps = {
    */
   select: getPropSelector(linkPropTypes),
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` xor `href`.
+   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
    *
    * @param {({ onPress?: () => void, href?: string })}
    * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
    * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
    */
   handleHref: ({ onPress, href }) => {
-    // TODO: revisit this when integrating routing packages
-    // https://github.com/telus/universal-design-system/issues/24
-    if (href && onPress) {
-      throw new Error("handleHref currently doesn't support both href and onPress")
-    }
     if (!href && !onPress) {
       throw new Error('handleHref requires either href or onPress')
     }
-    return Platform.OS !== 'web' && href ? () => Linking.openURL(href) : onPress
+    return Platform.select({
+      web: onPress,
+      default: (...args) => {
+        if (onPress) onPress(...args)
+        if (href) Linking.openURL(href)
+      }
+    })
   }
 }
 
 const viewPropTypes = {
   pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: PropTypes.func,
-  nativeID: PropTypes.string
+  nativeID: PropTypes.string,
+  testID: PropTypes.string,
+  dataSet: PropTypes.object
 }
 
 export const viewProps = {
@@ -492,20 +461,19 @@ export const spacingProps = {
 }
 
 /**
- * Returns a prop type validator which checks whether a prop is either a component or an array of components of a given
- * type, based on their `name` property.
+ * Returns a prop type validator which checks whether a prop is either a component or an array of
+ * components of a given type, based on their `name` or `displayName` properties.
  * Use an array of strings for `passedName` to accept more than one component type.
  * For an array the validation fails on the first occurrence of an invalid element.
  *
  * @param {string|string[]} passedName
- * @param {boolean} [checkDisplayName] - if `true` then `displayName` property on the component will be validated instead of `name`
  * @return {function}
  */
-export const componentPropType = (passedName, checkDisplayName = false) => {
+export const componentPropType = (passedName) => {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName
 
   const checkProp = (props, propName, componentName) => {
-    if (typeof props[propName] === 'undefined' || props[propName] === null) {
+    if (props[propName] === undefined || props[propName] === null) {
       return undefined
     }
 
@@ -517,25 +485,11 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
         .find(Boolean)
     }
 
-    const testNameInObject = () =>
-      typeof props[propName] === 'object' &&
-      ((!checkDisplayName && !passedNames.includes(props[propName].type.name)) ||
-        (checkDisplayName && !passedNames.includes(props[propName].type.displayName)))
-
-    const testNameInFunction = () =>
-      typeof props[propName] === 'function' &&
-      ((!checkDisplayName && !passedNames.includes(props[propName].name)) ||
-        (checkDisplayName && !passedNames.includes(props[propName].displayName)))
-
-    if (
-      (props[propName] &&
-        typeof props[propName] !== 'object' &&
-        typeof props[propName] !== 'function') ||
-      testNameInObject() ||
-      testNameInFunction()
-    ) {
+    const nameInProp = props[propName].type?.displayName || props[propName].type?.name
+    if (!nameInProp || !passedNames.includes(nameInProp)) {
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName]
       return new Error(
-        `${componentName}: Component passed to \`${propName}\` prop should be ${passedNames.join(
+        `${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(
           ' or '
         )}`
       )

package/src/utils/useCopy.js

@@ -29,7 +29,7 @@ export const DEFAULT_COPY = 'en'
  */
 function useCopy({ dictionary, copy = DEFAULT_COPY }) {
   if (typeof copy === 'string') {
-    return (key) => dictionary[copy][key]
+    return (key) => (key ? dictionary[copy][key] : dictionary[copy])
   }
 
   // support overriding the entire copy dictionary with an object for a single language

package/src/utils/useHash.js

@@ -1,6 +1,11 @@
 import { useEffect, useState } from 'react'
 
-const doAction = (action) => typeof action === 'function' && action(window?.location?.hash)
+const doAction = (action, event) =>
+  typeof action === 'function' && action(window?.location?.hash, event)
+
+/**
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
 
 /**
  * Calls a function (passing it the current hash) based on the current hash state on mount,
@@ -10,7 +15,7 @@ const doAction = (action) => typeof action === 'function' && action(window?.loca
  *
  * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
  *
- * @param {(hash: string) => void} action - a function to act on the current hash on load and when it changes
+ * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
 const useHash = (action, isReady = true) => {
@@ -26,7 +31,7 @@ const useHash = (action, isReady = true) => {
 
   // Bind the action for each hash change; do re-bind if the function changes.
   useEffect(() => {
-    const handleChange = () => doAction(action)
+    const handleChange = (event) => doAction(action, event)
     window.addEventListener('hashchange', handleChange)
     return () => window.removeEventListener('hashchange', handleChange)
   }, [action])

package/stories/A11yText/A11yText.stories.jsx

@@ -2,8 +2,8 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import A11yText from '../../lib/A11yText'
-import { Button, Typography } from '../../lib'
+import A11yText from '../../src/A11yText'
+import { Button, Typography } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 const defaultArgs = {
@@ -12,7 +12,7 @@ const defaultArgs = {
 }
 
 export default {
-  title: 'Base/A11yText',
+  title: 'A11yText',
   component: A11yText,
   parameters: defaultArgs
 }

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { ActivityIndicator } from '../../lib'
+import { ActivityIndicator } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/ActivityIndicator',
+  title: 'ActivityIndicator',
   component: ActivityIndicator,
   args: {
     label: 'loading...'

package/stories/Box/Box.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { View, StyleSheet } from 'react-native'
-import { Box, Typography } from '../../lib'
+import { Box, Typography } from '../../src'
 import {
   spacingObjectArg,
   Container,
@@ -12,7 +12,7 @@ import {
 } from '../supports'
 
 export default {
-  title: 'Base/Box',
+  title: 'Box',
   component: Box
 }
 

package/stories/Button/Button.stories.jsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { Button, useTheme } from '../../lib'
+import { Button, useTheme } from '../../src'
 import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
-import { getComponentTheme } from '../../lib/ThemeProvider/utils'
+import { getComponentTheme } from '../../src/ThemeProvider/utils'
 
 export const Default = (args) => <Button {...args} />
 Default.storyName = 'Button'
@@ -10,7 +10,7 @@ Default.storyName = 'Button'
 const defaultLabel = "I'm a button"
 
 export default {
-  title: 'Base/Button',
+  title: 'Button',
   component: Button,
   args: {
     // eslint-disable-next-line no-console

package/stories/Button/ButtonGroup.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import { View } from 'react-native'
-import { ButtonGroup, Typography } from '../../lib'
+import { ButtonGroup, Typography } from '../../src'
 import { Container } from '../supports'
 
 const defaultArgs = {
@@ -22,7 +22,7 @@ const defaultControlledArgs = {
 }
 
 export default {
-  title: 'Base/ButtonGroup',
+  title: 'ButtonGroup',
   component: ButtonGroup,
   args: {
     ...defaultArgs

package/stories/Button/ButtonLink.stories.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { ButtonLink } from '../../lib'
+import { ButtonLink } from '../../src'
 import { Container, useVariants } from '../supports'
 
 export default {
-  title: 'Base/ButtonLink',
+  title: 'ButtonLink',
   component: ButtonLink,
   args: {
     children: "I'm a button link",

package/stories/Card/Card.stories.jsx

@@ -2,11 +2,11 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { Card } from '../../lib'
+import { Card } from '../../src'
 import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Card',
+  title: 'Card',
   component: Card
 }
 

package/stories/Checkbox/Checkbox.stories.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { Checkbox, CheckboxGroup, Typography } from '../../lib'
+import { Checkbox, CheckboxGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
-  title: 'Base/Checkbox',
+  title: 'Checkbox',
   component: Checkbox,
   argTypes: {
     checked: {