@telus-uds/components-base 1.7.0 → 1.8.1

package/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -1,64 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { View } from 'react-native'
-import { ToggleSwitch, Typography } from '../../src'
-import { Container, EachParentType, parentTypesParams } from '../supports'
-
-export const Default = (args) => <ToggleSwitch {...args} />
-Default.storyName = 'ToggleSwitch'
-
-export default {
-  title: 'ToggleSwitch',
-  component: ToggleSwitch,
-  args: {
-    label: 'Enable data',
-    tooltip: 'Toggle this on to enable data'
-  }
-}
-
-export const ToggleSwitchControlled = (args) => {
-  // Simulate saving and retrieving data from a server
-  const [isSaving, setIsSaving] = useState(false)
-  const [currentValue, setValue] = useState(false)
-  const handleChange = (newValue) => {
-    setIsSaving(true)
-    setTimeout(() => {
-      setValue(newValue)
-      setIsSaving(false)
-    }, 400)
-  }
-  const text = isSaving ? 'Saving...' : 'Saved'
-  return (
-    <View>
-      <Container padding={4} margin={0}>
-        <Typography variant={{ size: 'small', colour: 'secondary' }}>{text}</Typography>
-      </Container>
-      <Container padding={4} margin={0}>
-        <ToggleSwitch {...args} value={currentValue} onChange={handleChange} inactive={isSaving} />
-      </Container>
-    </View>
-  )
-}
-
-export const ToggleSwitchInactive = (args) => (
-  <>
-    <Container>
-      <ToggleSwitch {...args} inactive />
-    </Container>
-    <Container>
-      <ToggleSwitch {...args} inactive value={true} />
-    </Container>
-  </>
-)
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="ToggleSwitch" {...args}>
-    {({ label, variant }) => (
-      <>
-        <Typography>{`${label} `}</Typography>
-        <ToggleSwitch {...args} variant={variant} />
-      </>
-    )}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx

@@ -1,81 +0,0 @@
-/* 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 }

package/stories/Tooltip/Tooltip.stories.jsx

@@ -1,81 +0,0 @@
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import { View, Text } from 'react-native'
-
-import { Tooltip, Typography } from '../../src'
-import { Container } from '../supports'
-
-export default {
-  title: 'Tooltip',
-  component: Tooltip
-}
-
-const Template = (args) => <Tooltip {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  content: 'This is a tooltip'
-}
-
-export const Positioning = () => (
-  <>
-    <Typography>Here to preload the fonts</Typography>
-    <Container>
-      <Tooltip content="position is forced to left" position="left" />
-    </Container>
-    <Container>
-      <Tooltip content="automatically positioned" />
-    </Container>
-    <Container>
-      <View style={{ alignSelf: 'center', marginRight: 140 }}>
-        <Tooltip content="position is forced to below" position="below" />
-      </View>
-    </Container>
-    <Container>
-      <View style={{ alignSelf: 'center' }}>
-        <Tooltip
-          content="(automatically positioned) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
-          luctus sapien in felis auctor commodo. Mauris sagittis, lorem eu rhoncus mattis, mi erat
-          mollis lectus, in ornare"
-        />
-      </View>
-    </Container>
-    <Container>
-      <View style={{ alignSelf: 'center', marginLeft: 140 }}>
-        <Tooltip content="automatically positioned" />
-      </View>
-    </Container>
-    <Container>
-      <View style={{ alignSelf: 'flex-end' }}>
-        <Tooltip content="automatically positioned automatically positioned" />
-      </View>
-    </Container>
-    <Container>
-      <View style={{ alignSelf: 'flex-end', marginTop: 500 }}>
-        <Tooltip position="right" content="position is forced to right" />
-      </View>
-    </Container>
-  </>
-)
-
-export const CustomControl = () => (
-  <Tooltip content="Amazing 😍">
-    <Text>Tooltip is applied to this text</Text>
-  </Tooltip>
-)
-
-export const CustomControlFunction = () => (
-  <Tooltip content="Tooltip content">
-    {(pressableState, variant) => (
-      <Text>
-        Tooltip is applied to this text (state: {pressableState.hover ? 'hover' : 'default'},
-        variant: {variant?.inverse ? 'inverse' : 'none'})
-      </Text>
-    )}
-  </Tooltip>
-)
-
-export const ComponentsInContent = () => (
-  <Tooltip content={<Typography tokens={{ color: 'white' }}>Typography in content</Typography>} />
-)

package/stories/TooltipButton/TooltipButton.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-import { TooltipButton } from '../../src'
-
-export default {
-  title: 'TooltipButton',
-  component: TooltipButton
-}
-
-export const Default = () => <TooltipButton onPress={() => {}} />
-Default.storyName = 'TooltipButton'

package/stories/Typography/Typography.stories.jsx

@@ -1,49 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-
-import { useVariants, Container, EachParentType, parentTypesParams } from '../supports'
-import { Typography } from '../../src'
-
-export const Default = (args) => <Typography {...args} />
-Default.storyName = 'Typography'
-
-const defaultChildren = 'The quick brown fox jumps over the lazy dog'
-
-export default {
-  title: 'Typography',
-  component: Typography,
-  args: {
-    children: defaultChildren
-  }
-}
-
-const VariantsTemplate = (args) => {
-  const variants = useVariants('Typography')
-  return variants.map(([key, value, label]) => (
-    <Container key={`${key}:${value}`} padding={16} dark={key === 'inverse'}>
-      <Typography {...args} variant={{ [key]: value }}>
-        {[`Typography ${label}. `, args.children]}
-      </Typography>
-    </Container>
-  ))
-}
-
-export const TypographyVariants = VariantsTemplate.bind({})
-TypographyVariants.args = { children: '' }
-
-export const LongTextTypographyVariants = VariantsTemplate.bind({})
-LongTextTypographyVariants.args = {
-  children: [
-    // Can't use `` template string for multi line paragraph as line breaks get converted to <br>s
-    'A longer sample of text content for demonstrating this variant of the Typography component. ',
-    'This sample of text should span across two or more lines, depending on which variants are currently active, ',
-    'and what the current screen size is of the window in which this component is being shown.'
-  ]
-}
-
-export const ParentTypes = (args) => (
-  <EachParentType componentThemeName="Typography" {...args}>
-    {({ label, variant }) => <Typography {...args} variant={variant}>{`${label}. `}</Typography>}
-  </EachParentType>
-)
-ParentTypes.parameters = parentTypesParams

package/stories/platform-supports.jsx

@@ -1,32 +0,0 @@
-/* eslint-disable react/no-unescaped-entities */
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable react/no-multi-comp */
-/* eslint-disable import/prefer-default-export */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Typography } from '../src'
-
-const BlockDiv = ({ children }) => <div>{children}</div>
-BlockDiv.propTypes = { children: PropTypes.node }
-
-const InlineBlockDiv = ({ children }) => <div style={{ display: 'inline-block' }}>{children}</div>
-InlineBlockDiv.propTypes = { children: PropTypes.node }
-
-const FloatDiv = ({ children }) => (
-  <div>
-    <div style={{ float: 'right', maxWidth: '85%', marginLeft: '10px' }}>{children}</div>
-    <Typography block>
-      Some lengthy text in a paragraph with a block above it containing the components to test,
-      where the block above it has the style "float: right" applied and no other styles, giving the
-      block a minimised dynamic width positioned to the right hand side of it and this text
-      element's mutual parent.
-    </Typography>
-  </div>
-)
-FloatDiv.propTypes = { children: PropTypes.node }
-
-export const containers = {
-  BlockDiv,
-  InlineBlockDiv,
-  FloatDiv
-}

package/stories/platform-supports.native.jsx

@@ -1,3 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-// Add any native-only containers for use in the Expo app here
-export const containers = {}

package/stories/supports.jsx

@@ -1,236 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Platform, ScrollView, Text, View, StyleSheet } from 'react-native'
-
-/* eslint-disable import/no-extraneous-dependencies */
-import * as alliumIcons from '@telus-uds/palette-allium/build/rn/icons'
-import * as koodoIcons from '@telus-uds/palette-koodo/build/rn/icons'
-import * as pmIcons from '@telus-uds/palette-public-mobile/build/rn/icons'
-/* eslint-enable import/no-extraneous-dependencies */
-
-import { useTheme, getComponentTheme } from '../src/ThemeProvider'
-import { Typography } from '../src'
-import { containers as platformContainers } from './platform-supports'
-
-const iconSets = {
-  allium: alliumIcons,
-  koodo: koodoIcons,
-  publicMobile: pmIcons
-}
-
-const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
-RowWrap.propTypes = { children: PropTypes.node }
-
-const RowStretch = ({ children }) => (
-  <ScrollView horizontal contentContainerStyle={styles.rowStretch}>
-    {children}
-  </ScrollView>
-)
-RowStretch.propTypes = { children: PropTypes.node }
-
-const ColumnWrap = ({ children }) => (
-  <ScrollView
-    horizontal
-    style={styles.columnWrapContainer}
-    contentContainerStyle={styles.columnWrap}
-  >
-    {children}
-  </ScrollView>
-)
-ColumnWrap.propTypes = { children: PropTypes.node }
-
-const ColumnStretch = ({ children }) => (
-  <View containerStyle={styles.columnStretch}>{children}</View>
-)
-ColumnStretch.propTypes = { children: PropTypes.node }
-
-// TODO: find a way to give Base stories a complete empty SpacingObject for easy editting
-// while giving themed stories a simpler value.
-export const spacingObjectArg = { xs: 1, lg: 3 }
-
-export const parentTypes = {
-  RowWrap,
-  RowStretch,
-  ColumnWrap,
-  ColumnStretch,
-  ...platformContainers
-}
-
-/**
- * React Native (and therefore also React Native Web) components are usually at some level based on
- * `View` and have some default layout styles that are quite different to regular web defaults:
- *
- *  - `display: flex` instead of `display: block`
- *  - `flexDirection: column` instead of `flexDirection: row` when flex
- *  - `position: relative`
- *
- * It's easy to fall into the trap of developing and testing something that works fine in a regular
- * `View` but doesn't work as expected in other common layout containers. This is particularly true
- * for UDS where internally we are devleoping entirely within React Native but many real-world use cases
- * will mix UDS components with regular web HTML elements.
- *
- * The `EachParentType` support component and related `parentTypes` tooling are intended to make it easy
- * to routinely test and demonstrate how UDS components behave in a wide range of parent types.
- *
- * To use it, pass as `children` a render function that takes the following and places them appropriately
- * in a demonstration of your component (be careful to not wrap the component in a `View` or container as
- * that will defeat the point of the exercise!):
- *
- * - `variant` - each theme variant will be rendered as siblings, pass this to the component's `variant` prop.
- * - `label` - this will describe the parent type / variant combination and ideally should be somewhere easy to read
- *   inside the component to help users understand what they are looking at.
- * - `index` - the index of the currently rendered component variant (`0` if the component has no variants).
- */
-export const EachParentType = ({ children, componentThemeName, ...args }) => {
-  const variants = useVariants(componentThemeName)
-  return Object.entries(parentTypes).map(([parentLabel, ParentType]) => (
-    <Container key={parentLabel} offWhite>
-      <ParentType>
-        {variants.map(([key, value, variantLabel], index) => {
-          const label = variantLabel ? `${parentLabel}: ${variantLabel}` : parentLabel
-          const variant = { ...args.variant, [key]: value }
-          return typeof children === 'function' ? children({ label, variant, index }) : children
-        })}
-      </ParentType>
-    </Container>
-  ))
-}
-
-const parentTypesList = `\`"${Object.keys(parentTypes).join('"`, `"')}"\``
-
-export const parentTypesParams = {
-  docs: {
-    storyDescription: `This tests how this component's variants render in each of the following types of container: ${parentTypesList}.`
-  }
-}
-
-/**
- * Utility component that takes a render function as its child and runs it for each
- * icon entry in the RN build of the palette of the currently selected theme.
- *
- * If the theme isn't supported or named, it returns a message saying no icons found.
- */
-export const EachIcon = ({ children }) => {
-  const theme = useTheme()
-  const themeName = theme?.metadata?.name
-  const iconSet = iconSets[themeName]
-  return iconSet ? (
-    Object.entries(iconSet).map((iconEntry) => children(iconEntry))
-  ) : (
-    <Text>{`No icons found for theme "${themeName}"`}</Text>
-  )
-}
-EachIcon.propTypes = {
-  children: PropTypes.func
-}
-
-export const Placeholder = ({ margin = false, ...props }) => (
-  <View style={[styles.placeholder, margin && styles.margin]}>
-    <Typography {...props} />
-  </View>
-)
-Placeholder.propTypes = {
-  margin: PropTypes.bool
-}
-
-export const Container = ({
-  margin = 8,
-  padding = 8,
-  dark = false,
-  offWhite = false,
-  borderWidth,
-  style,
-  children
-}) => (
-  <View
-    style={[
-      { margin, padding },
-      dark && styles.dark,
-      offWhite && styles.offWhite,
-      { borderWidth },
-      style
-    ]}
-  >
-    {children}
-  </View>
-)
-Container.propTypes = {
-  margin: PropTypes.number,
-  padding: PropTypes.number,
-  borderWidth: PropTypes.number,
-  dark: PropTypes.bool,
-  offWhite: PropTypes.bool,
-  style: PropTypes.object,
-  children: PropTypes.node
-}
-
-const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `: ${value}` : ''}`
-/**
- * For each "variant" appearance in a component theme, returns an array of
- * [key, value] tuple-like arrays for every value of every key
- */
-export const useVariants = (componentName) => {
-  const theme = useTheme()
-  if (!componentName) return [['default', {}]]
-
-  const { appearances } = getComponentTheme(theme, componentName)
-
-  if (!appearances) {
-    throw new Error(
-      `Theme ${theme.metadata?.name} does not have any appearances set for ${componentName}`
-    )
-  }
-
-  const variants = Object.entries(appearances).reduce(
-    (pairs, [key, { values, type } = {}]) =>
-      type === 'variant'
-        ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
-        : pairs,
-    [[undefined, undefined, 'default style']]
-  )
-  return variants
-}
-
-const styles = StyleSheet.create({
-  rowWrap: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-    flex: 1
-  },
-  rowStretch: {
-    flexDirection: 'row',
-    flexGrow: 1
-  },
-  columnStretch: {
-    // alignItems: 'stretch' and flexDirection: 'column' are the default
-  },
-  columnWrap: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-    // Ensure the content columns wrap
-    ...Platform.select({ web: { maxHeight: 150 }, default: { height: 125, minWidth: '200%' } }),
-    flexGrow: 1
-  },
-  content: {
-    maxWidth: 200,
-    paddingHorizontal: 16
-  },
-  placeholder: {
-    padding: 16,
-    textAlign: 'center',
-    backgroundColor: '#f0f1ff',
-    borderRadius: 2
-  },
-  margin: {
-    marginVertical: 8
-  },
-  dark: {
-    backgroundColor: 'rgb(35,35,35)'
-  },
-  offWhite: {
-    backgroundColor: 'rgb(210,210,210)'
-  }
-})