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

package/stories/supports.jsx

@@ -1,27 +1,97 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { Platform, ScrollView, View, StyleSheet } from 'react-native'
 import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
 import { Typography } from '../lib'
 import { containers as platformContainers } from './platform-supports'
 
-const FlexRow = ({ children }) => <View style={styles.row}>{children}</View>
-FlexRow.propTypes = { children: PropTypes.node }
+const RowWrap = ({ children }) => <View style={styles.rowWrap}>{children}</View>
+RowWrap.propTypes = { children: PropTypes.node }
 
-const FlexColumn = ({ children }) => <View style={styles.column}>{children}</View>
-FlexColumn.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 = {
-  FlexRow,
-  FlexColumn,
+  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}.`
+  }
+}
+
 export const Placeholder = ({ margin = false, ...props }) => (
   <View style={[styles.placeholder, margin && styles.margin]}>
     <Typography {...props} />
@@ -36,17 +106,29 @@ export const Container = ({
   padding = 8,
   dark = false,
   offWhite = false,
+  borderWidth,
+  style,
   children
 }) => (
-  <View style={[{ margin, padding }, dark && styles.dark, offWhite && styles.offWhite]}>
+  <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
 }
 
@@ -57,6 +139,8 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  */
 export const useVariants = (componentName) => {
   const theme = useTheme()
+  if (!componentName) return [['default', {}]]
+
   const { appearances } = getComponentTheme(theme, componentName)
 
   if (!appearances) {
@@ -66,7 +150,7 @@ export const useVariants = (componentName) => {
   }
 
   const variants = Object.entries(appearances).reduce(
-    (pairs, [key, { values, type }]) =>
+    (pairs, [key, { values, type } = {}]) =>
       type === 'variant'
         ? [...pairs, ...values.map((value) => [key, value, getVariantLabel(key, value)])]
         : pairs,
@@ -76,14 +160,26 @@ export const useVariants = (componentName) => {
 }
 
 const styles = StyleSheet.create({
-  row: {
+  rowWrap: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    flex: 1
+  },
+  rowStretch: {
     flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap'
+    flexGrow: 1
+  },
+  columnStretch: {
+    // alignItems: 'stretch' and flexDirection: 'column' are the default
   },
-  column: {
+  columnWrap: {
     flexDirection: 'column',
-    alignItems: 'center'
+    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,

package/lib/Pagination/useCopy.js

@@ -1,10 +0,0 @@
-function useCopy({
-  dictionary,
-  copy
-}) {
-  const getCopy = key => dictionary[copy][key];
-
-  return getCopy;
-}
-
-export default useCopy;

package/lib/utils/spacing/index.js

@@ -1,2 +0,0 @@
-export { default as useSpacingScale } from './useSpacingScale';
-export * from './utils';

package/lib/utils/spacing/utils.js

@@ -1,32 +0,0 @@
-import { viewports as systemViewports } from '@telus-uds/system-constants';
-export const resolveSpacingValue = (space, viewport) => {
-  // If spacing value has been passed as undefined or nullish, get the 0-index
-  if (!space) return 0; // Pass through simple non-responsive numbers (which may be in objects alongside options)
-
-  if (typeof space === 'number') return space;
-  if (typeof space.space === 'number') return space.space; // Get the appropriate space value for the current viewport.
-  // If no viewports available (e.g. SSR), default to the smallest.
-  // If no values are found (e.g. empty space object), default to 0.
-
-  return (viewport && systemViewports.inherit(space)[viewport]) ?? space.xs ?? 0;
-};
-export const resolveSpacingOptions = space => {
-  if (!space?.options) return {};
-  const {
-    size,
-    variant,
-    subtract = 0
-  } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
-  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
-  // https://github.com/telus/universal-design-system/issues/583
-
-  return {
-    tokens: {
-      size
-    },
-    variant,
-    overridden,
-    subtract
-  };
-};

package/src/Pagination/useCopy.js

@@ -1,7 +0,0 @@
-function useCopy({ dictionary, copy }) {
-  const getCopy = (key) => dictionary[copy][key]
-
-  return getCopy
-}
-
-export default useCopy

package/src/utils/spacing/index.js

@@ -1,3 +0,0 @@
-export { default as useSpacingScale } from './useSpacingScale'
-
-export * from './utils'

package/src/utils/spacing/utils.js

@@ -1,28 +0,0 @@
-import { viewports as systemViewports } from '@telus-uds/system-constants'
-
-export const resolveSpacingValue = (space, viewport) => {
-  // If spacing value has been passed as undefined or nullish, get the 0-index
-  if (!space) return 0
-
-  // Pass through simple non-responsive numbers (which may be in objects alongside options)
-  if (typeof space === 'number') return space
-  if (typeof space.space === 'number') return space.space
-
-  // Get the appropriate space value for the current viewport.
-  // If no viewports available (e.g. SSR), default to the smallest.
-  // If no values are found (e.g. empty space object), default to 0.
-  return (viewport && systemViewports.inherit(space)[viewport]) ?? space.xs ?? 0
-}
-
-export const resolveSpacingOptions = (space) => {
-  if (!space?.options) return {}
-
-  const { size, variant, subtract = 0 } = space.options
-  const overridden = typeof size === 'number'
-
-  // Might need an option that adapts the size value by current user's system font scale, so that
-  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
-  // https://github.com/telus/universal-design-system/issues/583
-
-  return { tokens: { size }, variant, overridden, subtract }
-}