@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.5

package/stories/supports.jsx

@@ -1,23 +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} />
@@ -32,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
 }
 
@@ -53,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) {
@@ -72,14 +160,26 @@ export const useVariants = (componentName) => {
 }
 
 const styles = StyleSheet.create({
-  row: {
+  rowWrap: {
     flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap'
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    flex: 1
+  },
+  rowStretch: {
+    flexDirection: 'row',
+    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/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ['@babel/plugin-transform-react-jsx']
-}