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

package/src/utils/propTypes.js

@@ -1,6 +1,6 @@
 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'
 
 export const paddingProp = {
   propType: PropTypes.shape({
@@ -39,29 +39,61 @@ export const variantProp = {
   )
 }
 
-// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values
-// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... })
-const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
+// or components (e.g. Icon tokens)
+const tokenValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.number,
+  PropTypes.bool,
+  PropTypes.elementType
+])
 const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)])
 
-const getTokenNames = (componentName) => {
-  const componentTokenNames = tokenKeys[componentName]
-  if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-themes/schema`)
+export const getTokenNames = (componentName) => {
+  const componentTokenSchema = tokenKeys[componentName]
+  if (!componentTokenSchema) {
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`)
   }
-  return componentTokenNames
+  return Object.keys(componentTokenSchema)
 }
 
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
+ * or by a provided array of tokens. A prefix may be provided, for example:
+ *
+ * @example
+ * ```jsx
+ * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
+ * selectTokens('Button', themeTokens)
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns `{ backgroundColor, width }` where the values of those keys come from
+ * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
+ * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns tokens that are defined in the `Button` theme schema, from tokens with
+ * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
+ * selectTokens('Button', themeTokens, 'button')
+ * ```
+ *
+ * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
+ * @param {object} tokens - a source object of theme tokens
+ * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
+ * @returns {object} - subset of theme tokens
  */
-export const selectTokens = (componentName, tokens) => {
-  const tokenNames = getTokenNames(componentName)
-  const filteredTokens = Object.entries(tokens).reduce(
-    (validTokens, [key, value]) =>
-      tokenNames.includes(key) ? { ...validTokens, [key]: value } : validTokens,
-    {}
-  )
+export const selectTokens = (specifier, tokens, prefix) => {
+  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier
+  const filteredTokens = tokenNames.reduce((validTokens, key) => {
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key
+    const token = tokens[prefixedKey]
+    return token !== undefined ? { ...validTokens, [key]: token } : validTokens
+  }, {})
   return filteredTokens
 }
 
@@ -120,6 +152,41 @@ export const getTokensPropType = (...componentsNames) => (props, propName, compo
   }
 }
 
+/**
+ * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
+ *
+ * For example, for a set of tokens used in a common style, or for a set of tokens required by
+ * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
+ *
+ * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ *
+ * @param {string[]} componentTokenKeys - array of strings of token names
+ * @param {object} [options]
+ * @param {boolean} [options.partial] - if true, allows tokens to be undefined
+ * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
+ * @returns
+ */
+export const getTokensSetPropType = (
+  componentTokenKeys,
+  { partial = false, allowFunction = false } = {}
+) => {
+  const tokensObjectValidator = PropTypes.exact(
+    Object.fromEntries(
+      componentTokenKeys.map((key) => [
+        key,
+        partial
+          ? tokenValueType
+          : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+            (props, propName, ...args) =>
+              props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)
+      ])
+    )
+  )
+  return allowFunction
+    ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func])
+    : tokensObjectValidator
+}
+
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes)
   return (props) =>
@@ -138,7 +205,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 = {
-  // react-native-web >= 0.15.0 ignores `accessible` and looks for `focusable`
   accessible: PropTypes.bool,
   focusable: PropTypes.bool,
 
@@ -171,7 +237,79 @@ const a11yPropTypes = {
   importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
   onAccessibilityAction: PropTypes.func,
   onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func
+  onAccessibilityTap: PropTypes.func,
+  ...Platform.select({
+    web: {
+      // React Native Web adds many a11y props that alias aria-* attributes
+      // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+      accessibilityActiveDescendant: PropTypes.string,
+      accessibilityAtomic: PropTypes.bool,
+      accessibilityAutoComplete: PropTypes.string,
+      accessibilityBusy: PropTypes.bool,
+      accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+      accessibilityColumnCount: PropTypes.number,
+      accessibilityColumnIndex: PropTypes.number,
+      accessibilityColumnSpan: PropTypes.number,
+      accessibilityControls: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+      ]),
+      accessibilityCurrent: PropTypes.oneOf([
+        true,
+        false,
+        'page',
+        'step',
+        'location',
+        'date',
+        'time'
+      ]),
+      accessibilityDescribedBy: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+      ]),
+      accessibilityDetails: PropTypes.string,
+      accessibilityDisabled: PropTypes.bool,
+      accessibilityErrorMessage: PropTypes.string,
+      accessibilityExpanded: PropTypes.bool,
+      accessibilityFlowTo: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+      ]),
+      accessibilityHasPopup: PropTypes.string,
+      accessibilityHidden: PropTypes.bool,
+      accessibilityInvalid: PropTypes.bool,
+      accessibilityKeyShortcuts: PropTypes.string,
+      accessibilityLabelledBy: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+      ]),
+      accessibilityLevel: PropTypes.number,
+      accessibilityModal: PropTypes.bool,
+      accessibilityMultiline: PropTypes.bool,
+      accessibilityMultiSelectable: PropTypes.bool,
+      accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+      accessibilityOwns: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+      ]),
+      accessibilityPlaceholder: PropTypes.string,
+      accessibilityPosInSet: PropTypes.number,
+      accessibilityPressed: PropTypes.bool,
+      accessibilityReadOnly: PropTypes.bool,
+      accessibilityRequired: PropTypes.bool,
+      accessibilityRoleDescription: PropTypes.string,
+      accessibilityRowCount: PropTypes.number,
+      accessibilityRowIndex: PropTypes.number,
+      accessibilityRowSpan: PropTypes.number,
+      accessibilitySelected: PropTypes.bool,
+      accessibilitySetSize: PropTypes.number,
+      accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+      accessibilityValueMax: PropTypes.number,
+      accessibilityValueMin: PropTypes.number,
+      accessibilityValueNow: PropTypes.number,
+      accessibilityValueText: PropTypes.string
+    }
+  })
 }
 
 export const a11yProps = {
@@ -191,10 +329,9 @@ export const a11yProps = {
    * Use this to disable focus for elements which are visually hidden but still rendered.
    */
   nonFocusableProps: {
-    focusable: false, // for android, and for keyboard nav in web (RNW >= 0.15.x)
+    focusable: false, // for android, and for keyboard nav in web
     ...Platform.select({
       web: {
-        accessible: false, // workaround for web keyboard nav in RNW < 0.15.x
         accessibilityHidden: true // web screenreaders
       },
       android: {
@@ -248,26 +385,6 @@ export const hrefAttrsProp = {
       target
     },
     rest
-  }),
-  /**
-   * Takes a hrefAttrs object and returns an object that can be spread into Pressable props
-   * in a way that handles compatibility before and after React Native Web 0.15.0
-   */
-  spread: (hrefAttrs) => ({
-    /**
-     * React Native Web >= 0.15.0 supports hrefAttrs prop but requires React 17
-     * so is incompatible with Expo until July 2021
-     */
-    hrefAttrs,
-    /**
-     * React Native Web < 0.15.0 uses `target` and `rel` props.
-     * React Native Web >= 0.15.0 ignores these and reads hrefAttrs only.
-     */
-    rel: hrefAttrs?.rel,
-    target: hrefAttrs?.target
-    /**
-     * Don't spread hrefAttrs.download, RNW <0.15.0 doesn't support it.
-     */
   })
 }
 
@@ -292,8 +409,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])
+    }
   })
 }
 
@@ -326,25 +446,47 @@ 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,
+  testID: PropTypes.string,
+  dataSet: PropTypes.object
+}
+
+export const viewProps = {
+  /**
+   * Subset of `View` proptypes that could conceivably be needed on any component
+   * that renders a single View.
+   */
+  types: viewPropTypes,
+  /**
+   * Filters a props object, returning only cross-platform View props that are potentially
+   * relevant to any basic layout component that renders one View.
+   */
+  select: getPropSelector(viewPropTypes)
+}
+
 const getByViewport = (propType) => ({
   xs: propType,
   sm: propType,
@@ -428,20 +570,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
     }
 
@@ -453,25 +594,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

@@ -1,13 +1,39 @@
+export const DEFAULT_COPY = 'en'
+
 /**
  * Extract translations from a keyed dictionary for a given language.
  * Returns a getter.
  *
- * @param {object} dictionary
- * @param {'en'|'fr'} copy - language
+ * @example
+ * const getCopy = useCopy({
+ *   copy: 'en',
+ *   dictionary: {
+ *     en: { label: 'english label' },
+ *     fr: { label: 'french label' }
+ *   }
+ * })
+ *
+ * getCopy('label') => 'english label'
+ *
+ * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
+ * @example
+ * const getCopy = useCopy({
+ *   copy: { label: 'custom label' }
+ * })
+ *
+ * getCopy('label') => 'custom label'
+ *
+ * @param {object} [dictionary]
+ * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-function useCopy({ dictionary, copy }) {
-  return (key) => dictionary[copy][key]
+function useCopy({ dictionary, copy = DEFAULT_COPY }) {
+  if (typeof copy === 'string') {
+    return (key) => (key ? dictionary[copy][key] : dictionary[copy])
+  }
+
+  // support overriding the entire copy dictionary with an object for a single language
+  return (key) => copy[key]
 }
 
 export default useCopy

package/src/utils/useHash.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+
+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,
+ * and binds it to call it again any time the hash changes.
+ *
+ * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
+ *
+ * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
+ *
+ * @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) => {
+  const [isDone, setIsDone] = useState(false)
+  // Do the action just once when ready after component mount, from hash on page load
+  const isToDo = isReady && !isDone
+  useEffect(() => {
+    if (isToDo) {
+      setIsDone(true)
+      doAction(action)
+    }
+  }, [isToDo, action])
+
+  // Bind the action for each hash change; do re-bind if the function changes.
+  useEffect(() => {
+    const handleChange = (event) => doAction(action, event)
+    window.addEventListener('hashchange', handleChange)
+    return () => window.removeEventListener('hashchange', handleChange)
+  }, [action])
+}
+export default useHash

package/src/utils/useHash.native.js

@@ -0,0 +1,6 @@
+/**
+ * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
+ * is handled at OS level and deep links have completely different usage.
+ */
+const useHash = () => {}
+export default useHash

package/stories/A11yText/A11yText.stories.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+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 = {
@@ -44,13 +44,9 @@ A11yTextAsHeading.args = { ...defaultArgs, heading: true }
 
 export const A11yTextInButton = (args) => (
   <Button onPress={() => {}}>
-    {({ textStyles }) => (
-      <>
-        <A11yText {...args} />
-        <Text style={textStyles}>A11yText sandwich</Text>
-        <A11yText {...args} />
-      </>
-    )}
+    <A11yText {...args} />
+    A11yText sandwich
+    <A11yText {...args} />
   </Button>
 )
 A11yTextInButton.args = defaultArgs

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,6 +1,6 @@
 /* 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 {

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,

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'

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 = {

package/stories/Button/ButtonLink.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ButtonLink } from '../../lib'
+import { ButtonLink } from '../../src'
 import { Container, useVariants } from '../supports'
 
 export default {

package/stories/Card/Card.stories.jsx

@@ -2,7 +2,7 @@
 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 {

package/stories/Checkbox/Checkbox.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { Checkbox, Typography } from '../../lib'
+import { Checkbox, CheckboxGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
@@ -55,6 +55,29 @@ WithFeedback.args = {
   feedback: 'Something happened'
 }
 
+export const CheckboxGroupStory = (args) => <CheckboxGroup {...args} />
+CheckboxGroupStory.storyName = 'CheckboxGroup'
+CheckboxGroupStory.args = {
+  items: [
+    {
+      label: 'Checkbox 1'
+    },
+    {
+      label: 'Checkbox 2'
+    },
+    {
+      label: 'Checkbox 3'
+    },
+    {
+      label: 'Checkbox 4'
+    }
+  ],
+  legend: 'Choose checkboxes.',
+  hint: 'Of the checkboxes below, choose some.',
+  tooltip: 'Decide which checkboxes you like best, then press them.',
+  name: 'example'
+}
+
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Checkbox" {...args}>
     {({ label, variant }) => (

package/stories/Divider/Divider.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Divider, Typography } from '../../lib'
+import { Divider, Typography } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/ExpandCollapse/ExpandCollapse.stories.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../lib'
+import { Accordion, ButtonGroup, ExpandCollapse, StackView, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
-import { useMultipleInputValues } from '../../lib/utils'
+import { useMultipleInputValues } from '../../src/utils'
 
 export default {
   title: 'Base/ExpandCollapse',

package/stories/Feedback/Feedback.stories.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Text } from 'react-native'
 
-import { Feedback, Typography, TextInput } from '../../lib'
+import { Feedback, Typography, TextInput } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/FlexGrid/01 FlexGrid.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder, EachParentType, parentTypesParams } from '../supports'
 
 const { Row, Col } = FlexGrid

package/stories/FlexGrid/02 Row.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder } from '../supports'
 
 const { Row, Col } = FlexGrid

package/stories/FlexGrid/03 Col.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { FlexGrid } from '../../lib'
+import { FlexGrid } from '../../src'
 import { Placeholder } from '../supports'
 
 const { Row, Col } = FlexGrid