@telus-uds/components-base 1.1.0 → 1.2.0

package/src/ToggleSwitch/index.js

@@ -1,3 +1,4 @@
 import ToggleSwitch from './ToggleSwitch'
+import ToggleSwitchGroup from './ToggleSwitchGroup'
 
-export default ToggleSwitch
+export { ToggleSwitch, ToggleSwitchGroup }

package/src/index.js

@@ -37,7 +37,7 @@ 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'
+export * from './ToggleSwitch'
 export { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'
 export { default as Typography } from './Typography'

package/src/utils/index.js

@@ -12,3 +12,4 @@ export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
+export { default as withLinkRouter } from './withLinkRouter'

package/src/utils/propTypes.js

@@ -320,6 +320,36 @@ export const pressProps = {
   selectHandlers: getPropSelector(pressHandlerPropTypes)
 }
 
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+}
+
+export const clickProps = {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(
+    Object.keys(clickHandlerMapping).map((mouseName) => [mouseName, PropTypes.func])
+  ),
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: (props) =>
+    Object.fromEntries(
+      Object.entries(props).map(([originalName, value]) => {
+        const translatedName = clickHandlerMapping[originalName]
+        return translatedName ? [translatedName, value] : [originalName, value]
+      })
+    )
+}
+
 const linkPropTypes = {
   ...pressPropTypes,
   href: PropTypes.string,

package/src/utils/withLinkRouter.jsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop)
+
+/**
+ * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
+ * This may be used to provide custom wrappers for integrations with third party libraries.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
+ * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
+ * ```
+ */
+const withLinkRouter = (Component) => {
+  const wrappedComponent = forwardRef(({ LinkRouter, linkRouterProps, ...props }, ref) => {
+    if (!LinkRouter) return <Component {...props} ref={ref} />
+    return (
+      <LinkRouter linkRouterProps={linkRouterProps} Component={Component} ref={ref} {...props} />
+    )
+  })
+
+  // Ensure the returned component has appropriate outer properties set:
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+  const { displayName, name, propTypes, ...otherProperties } = Component
+
+  // Apply unique component name as a displayName
+  wrappedComponent.displayName = Component.displayName || Component.name
+
+  // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  wrappedComponent.propTypes = { ...Component.propTypes, ...withLinkRouter.propTypes }
+
+  // Forward any other properties explicitly set e.g. Component.SubComponent
+  Object.keys(otherProperties).forEach((key) => {
+    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key]
+    }
+  })
+  return wrappedComponent
+}
+
+withLinkRouter.propTypes = {
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
+}
+
+export default withLinkRouter

package/stories/TextInput/TextArea.stories.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from 'react'
 
 import { TextArea } from '../../src'

package/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -9,7 +9,11 @@ Default.storyName = 'ToggleSwitch'
 
 export default {
   title: 'ToggleSwitch',
-  component: ToggleSwitch
+  component: ToggleSwitch,
+  args: {
+    label: 'Enable data',
+    tooltip: 'Toggle this on to enable data'
+  }
 }
 
 export const ToggleSwitchControlled = (args) => {

package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { View } from 'react-native'
+import { ToggleSwitchGroup, Typography } from '../../src'
+import { Container } from '../supports'
+
+const defaultArgs = {
+  items: [
+    { label: 'First item', id: 'first' },
+    { label: 'Second item', id: 'second' },
+    { label: 'Third item', id: 'third' },
+    { label: 'Fourth item', id: 'fourth' },
+    { label: 'Fifth item', id: 'fifth' },
+    { label: 'Sixth item', id: 'sixth' }
+  ],
+  initialValues: ['second', 'fourth']
+}
+const defaultControlledArgs = {
+  ...defaultArgs,
+  values: defaultArgs.initialValues,
+  initialValues: undefined
+}
+
+export default {
+  title: 'ToggleSwitchGroup',
+  component: ToggleSwitchGroup,
+  args: {
+    ...defaultArgs
+  }
+}
+
+const UncontrolledTemplate = (args) => <ToggleSwitchGroup {...args} />
+UncontrolledTemplate.propTypes = ToggleSwitchGroup.propTypes
+
+const ControlledTemplate = ({ values, ...args }) => {
+  // Simulate saving and retrieving data from a server
+  const [isSaving, setIsSaving] = useState(false)
+  const [currentValues, setValues] = useState(values)
+  const handleChange = (newValue) => {
+    setIsSaving(true)
+    setTimeout(() => {
+      setValues(newValue)
+      setIsSaving(false)
+    }, 400)
+  }
+
+  const text = isSaving ? 'Saving...' : `Saved selected IDs: "${currentValues.join('", "')}".`
+  return (
+    <View>
+      <Container padding={4} margin={0}>
+        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
+      </Container>
+      <Container padding={4} margin={0}>
+        <ToggleSwitchGroup {...args} values={currentValues} onChange={handleChange} />
+      </Container>
+    </View>
+  )
+}
+
+ControlledTemplate.propTypes = ToggleSwitchGroup.propTypes
+
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'ToggleSwitchGroup'
+
+export const ToggleSwitchGroupMaxThree = UncontrolledTemplate.bind({})
+ToggleSwitchGroupMaxThree.args = { maxValues: 3 }
+
+export const ToggleSwitchGroupMaxUnlimited = UncontrolledTemplate.bind({})
+ToggleSwitchGroupMaxUnlimited.args = { maxValues: null }
+
+export const ToggleSwitchGroupControlled = ControlledTemplate.bind({})
+ToggleSwitchGroupControlled.args = { ...defaultControlledArgs }
+
+export const ToggleSwitchGroupControlledMaxThree = ControlledTemplate.bind({})
+ToggleSwitchGroupControlledMaxThree.args = { ...defaultControlledArgs, maxValues: 3 }
+
+export const ToggleSwitchGroupControlledMaxUnlimited = ControlledTemplate.bind({})
+ToggleSwitchGroupControlledMaxUnlimited.args = { ...defaultControlledArgs, maxValues: null }
+
+export const ToggleSwitchGroupInactive = UncontrolledTemplate.bind({})
+ToggleSwitchGroupInactive.args = { inactive: true }