@utilitywarehouse/hearth-react-native 0.16.2 → 0.18.0

package/src/components/Card/CardRoot.tsx

@@ -1,104 +1,18 @@
-import React, { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
 import CardProps from './Card.props';
+import CardActions from './CardActions';
 import CardContent from './CardContent';
-
-// Helper to check if children contain specific component types
-const checkForComponentType = (children: React.ReactNode, displayName: string): boolean => {
-  return React.Children.toArray(children).some(child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === displayName) {
-        return true;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return checkForComponentType(childProps.children, displayName);
-      }
-    }
-    return false;
-  });
-};
-
-// Helper to filter out specific component types from children
-const filterChildren = (children: React.ReactNode, excludeDisplayName: string): React.ReactNode => {
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === excludeDisplayName) {
-        return null;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return React.cloneElement(child, {
-          ...childProps,
-          children: filterChildren(childProps.children, excludeDisplayName),
-        });
-      }
-    }
-    return child;
-  });
-};
-
-// Helper to extract specific component types from children
-const extractChildren = (
-  children: React.ReactNode,
-  includeDisplayName: string,
-  markFirst = false
-): React.ReactNode => {
-  let isFirstFound = false;
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === includeDisplayName) {
-        const isFirst = markFirst && !isFirstFound;
-        if (isFirst) {
-          isFirstFound = true;
-        }
-        return markFirst
-          ? React.cloneElement(child, { ...(child.props || {}), isFirst } as any)
-          : child;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return extractChildren(childProps.children, includeDisplayName, markFirst);
-      }
-    }
-    return null;
-  });
-};
-
-// Helper that recursively collects onPress or other defined handlers from descendants
-const collectChildActionHandlers = (
-  children: React.ReactNode
-): Array<(e: GestureResponderEvent) => void> =>
-  React.Children.toArray(children).reduce(
-    (handlers, child) => {
-      if (React.isValidElement(child)) {
-        const childProps = child.props as any;
-        // @ts-expect-error - type
-        if (child.type.displayName === 'CardPressHandler') {
-          const actionChildren = React.Children.toArray(childProps.children);
-          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
-          const firstChild = actionChildren[0];
-          if (
-            React.isValidElement(firstChild) &&
-            typeof (firstChild.props as any)[handlerToInherit] === 'function'
-          ) {
-            handlers.push((firstChild.props as any)[handlerToInherit]);
-          }
-        }
-        if (childProps.children) {
-          handlers.push(...collectChildActionHandlers(childProps.children));
-        }
-      }
-      return handlers;
-    },
-    [] as Array<(e: GestureResponderEvent) => void>
-  );
+import {
+  checkForComponentType,
+  collectChildActionHandlers,
+  extractCardActions,
+  filterChildren,
+  hasOnlyPotentialActions,
+} from './helpers';
 
 const Card = ({
   children,
@@ -116,8 +30,8 @@ const Card = ({
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
   const childActionHandlers = collectChildActionHandlers(children as ReactNode);
-  const hasActions = checkForComponentType(children as ReactNode, 'CardAction');
-  const hasContent = checkForComponentType(children as ReactNode, 'CardContent');
+  const hasActions = checkForComponentType(children as ReactNode, CardActions);
+  const hasContent = checkForComponentType(children as ReactNode, CardContent);
   // Extract style props using our custom hook
   const { computedStyles, remainingProps } = useStyleProps(rest);
 
@@ -132,19 +46,9 @@ const Card = ({
   const inheritChildAction = childActionHandlers.length > 0;
   const showPressed = inheritChildAction || !!onPress;
 
-  const filteredChildren =
-    !hasContent && hasActions ? filterChildren(children as ReactNode, 'CardAction') : null;
-
-  // Check if there's any content besides CardActions
-  const hasOnlyActions =
-    hasActions &&
-    !hasContent &&
-    React.Children.toArray(filteredChildren).filter(child => child != null).length === 0;
-
-  const filteredCardActions =
-    !hasContent && hasActions
-      ? extractChildren(children as ReactNode, 'CardAction', hasOnlyActions)
-      : null;
+  // Check if all children are action groups (CardActions)
+  const potentiallyOnlyActions = hasOnlyPotentialActions(children as ReactNode, CardActions);
+  const hasOnlyActions = potentiallyOnlyActions && !hasContent;
 
   const context = useMemo(
     () => ({
@@ -162,38 +66,30 @@ const Card = ({
   styles.useVariants({
     variant,
     colorScheme,
-    noPadding: noPadding || hasActions || hasContent,
+    noPadding: noPadding || hasActions || hasContent || hasOnlyActions,
     active,
     showPressed,
     disabled,
-    space: hasActions || hasContent ? 'none' : space,
+    space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
     shadowColor,
   });
 
   const renderChildren = () => {
-    // Default: render children as-is
-    if (hasContent || !hasActions) {
+    // Explicit CardContent used - render as-is or Card has only actions (or potential action wrappers) - render children directly
+    if (hasContent || hasOnlyActions || !hasActions) {
       return children as ReactNode;
     }
 
-    // Card has actions but no explicit CardContent
-    if (hasOnlyActions) {
-      // Only CardActions, no other content - render actions directly
-      return filteredCardActions as ReactNode;
-    }
+    // Has both actions and other content - wrap non-action content and render actions separately
+    const filteredNonActionChildren = filterChildren(children as ReactNode, CardActions);
+    const cardActions = extractCardActions(children as ReactNode, CardActions);
 
-    if (filteredChildren) {
-      // Has both actions and other content - wrap content and render actions below
-      return (
-        <>
-          <CardContent>{filteredChildren as ReactNode}</CardContent>
-          {filteredCardActions as ReactNode}
-        </>
-      );
-    }
-
-    // Fallback
-    return children as ReactNode;
+    return (
+      <>
+        <CardContent>{filteredNonActionChildren as ReactNode}</CardContent>
+        {cardActions}
+      </>
+    );
   };
 
   return (
@@ -298,7 +194,6 @@ const styles = StyleSheet.create(theme => ({
           },
         },
       },
-
       active: {
         true: {},
       },

package/src/components/Card/helpers.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+
+const getInheritableHandler = (
+  child: React.ReactNode,
+  handlerToInherit: string
+): ((e: GestureResponderEvent) => void) | null => {
+  if (!React.isValidElement(child)) {
+    return null;
+  }
+
+  const childProps = child.props as any;
+  const isDisabled = !!childProps.disabled || !!childProps.loading;
+  if (isDisabled || typeof childProps[handlerToInherit] !== 'function') {
+    return null;
+  }
+
+  return childProps[handlerToInherit];
+};
+
+// Helper to check if children contain specific component types
+export const checkForComponentType = (
+  children: React.ReactNode,
+  componentType: React.ComponentType<any>
+): boolean => {
+  return React.Children.toArray(children).some(child => {
+    if (React.isValidElement(child)) {
+      if (child.type === componentType) {
+        return true;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return checkForComponentType(childProps.children, componentType);
+      }
+    }
+    return false;
+  });
+};
+
+// Check if a component has "content" in its children (not just actions)
+export const hasContentInChildren = (
+  child: React.ReactNode,
+  actionType: React.ComponentType<any>
+): boolean => {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+
+  const childProps = child.props as any;
+  if (!childProps?.children) {
+    return false;
+  }
+
+  // Check if children contain anything other than the action type
+  const childrenArray = React.Children.toArray(childProps.children);
+  return childrenArray.some(c => {
+    if (!React.isValidElement(c)) {
+      // Text, numbers, etc - this is content
+      return c != null;
+    }
+    return c.type !== actionType;
+  });
+};
+
+// Check if all children are CardActions groups
+export const hasOnlyPotentialActions = (
+  children: React.ReactNode,
+  actionType: React.ComponentType<any>
+): boolean => {
+  const childArray = React.Children.toArray(children);
+  if (childArray.length === 0) {
+    return false;
+  }
+
+  let hasActionCandidate = false;
+
+  for (const child of childArray) {
+    if (!React.isValidElement(child)) {
+      if (child != null) {
+        return false;
+      }
+      continue;
+    }
+
+    if (child.type === actionType) {
+      hasActionCandidate = true;
+      continue;
+    }
+
+    if (checkForComponentType(child, actionType)) {
+      hasActionCandidate = true;
+      continue;
+    }
+
+    if (typeof child.type === 'string') {
+      return false;
+    }
+
+    if (hasContentInChildren(child, actionType)) {
+      return false;
+    }
+
+    return false;
+  }
+
+  return hasActionCandidate || checkForComponentType(children, actionType);
+};
+
+// Helper to filter out specific component types from children
+export const filterChildren = (
+  children: React.ReactNode,
+  excludeComponentType: React.ComponentType<any>
+): React.ReactNode => {
+  return React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      if (child.type === excludeComponentType) {
+        return null;
+      }
+
+      // Check if this child contains the excludeComponentType
+      if (checkForComponentType(child, excludeComponentType)) {
+        return null; // This child or its descendants contain the action
+      }
+
+      const childProps = child.props as any;
+      if (childProps.children) {
+        const filteredChildren = filterChildren(childProps.children, excludeComponentType);
+        // Only preserve wrapper if it has non-null children
+        const hasContent = React.Children.toArray(filteredChildren).some(c => c != null);
+        if (!hasContent) {
+          return null;
+        }
+        return React.cloneElement(child, {
+          ...childProps,
+          children: filteredChildren,
+        });
+      }
+    }
+    return child;
+  });
+};
+
+// Helper to extract only CardActions (preserving wrapper components)
+export const extractCardActions = (
+  children: React.ReactNode,
+  actionType: React.ComponentType<any>
+): React.ReactNode => {
+  const recursiveExtract = (children: React.ReactNode): React.ReactNode => {
+    return React.Children.map(children, child => {
+      if (!React.isValidElement(child)) return null;
+
+      // Direct action
+      if (child.type === actionType) {
+        return child;
+      }
+
+      // If this child contains a CardActions wrapper in its tree, keep it
+      if (checkForComponentType(child, actionType) && !hasContentInChildren(child, actionType)) {
+        return child;
+      }
+
+      return null;
+    });
+  };
+
+  return recursiveExtract(children);
+};
+
+// Helper that recursively collects onPress or other defined handlers from descendants
+export const collectChildActionHandlers = (
+  children: React.ReactNode
+): Array<(e: GestureResponderEvent) => void> =>
+  React.Children.toArray(children).reduce(
+    (handlers, child) => {
+      if (React.isValidElement(child)) {
+        const childProps = child.props as any;
+        // Check using displayName as CardPressHandler might not be directly importable
+        // @ts-expect-error - type
+        if (child.type?.displayName === 'CardPressHandler') {
+          const actionChildren = React.Children.toArray(childProps.children);
+          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
+          const firstChild = actionChildren[0];
+          const handler = getInheritableHandler(firstChild, handlerToInherit);
+          if (handler) {
+            handlers.push(handler);
+          }
+        }
+        if (childProps.children) {
+          handlers.push(...collectChildActionHandlers(childProps.children));
+        }
+      }
+      return handlers;
+    },
+    [] as Array<(e: GestureResponderEvent) => void>
+  );

package/src/components/Card/index.ts

@@ -1,5 +1,7 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
 export * from './CardAction';
+export { default as CardActions } from './CardActions';
+export { default as CardContent } from './CardContent';
 export { default as CardPressHandler } from './CardPressHandler';
 export { useCardPressHandlerContext } from './CardPressHandler.context';

package/src/components/ExpandableCard/ExpandableCard.figma.tsx

@@ -1,54 +1,49 @@
-import React from "react"
-import ExpandableCard from "./ExpandableCard"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { ExpandableCard } from '../';
+import { IconContainer } from '../IconContainer';
 
 figma.connect(
   ExpandableCard,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      expanded: figma.boolean("Expand?"),
-      heading: figma.string("Heading"),
-      helperText: figma.string("Helper text"),
-      expandedContent: figma.enum("Expand?", {
-        False: false,
-        True: true,
+      expanded: figma.boolean('Expand?'),
+      heading: figma.string('Heading'),
+      helperText: figma.string('Helper text'),
+      leadingContent: figma.boolean('Leading content?', {
+        true: figma.nestedProps('Leading content', {
+          variant: figma.enum('Variant', {
+            Icon: figma.instance('Icon-24'),
+            'Icon Container': <IconContainer icon={figma.instance('Icon-24')} />,
+          }),
+        }),
       }),
-      disabled: figma.enum("State", {
+      disabled: figma.enum('State', {
         Active: true,
       }),
-      collapsable: figma.boolean("Expand?"),
-      focusable: figma.enum("State", {
+      collapsable: figma.boolean('Expand?'),
+      focusable: figma.enum('State', {
         Focus: true,
       }),
-      // No matching props could be found for these Figma properties:
-      // "customContent": figma.instance('Custom content'),
-      // "heading": figma.string('Heading'),
-      // "helperText": figma.string('Helper text'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "numericalValue": figma.boolean('Numerical value?'),
-      // "numericalValue": figma.string('Numerical value'),
-      // "leadingContent": figma.boolean('Leading content?'),
-      // "badge": figma.boolean('Badge?')
+      content: figma.instance('Custom content'),
+      numericalValue: figma.boolean('Numerical value?', {
+        true: figma.string('Numerical value'),
+      }),
+      badge: figma.boolean('Badge?', {
+        true: figma.instance('Badge'),
+      }),
     },
-    example: (props) => (
+    example: props => (
       <ExpandableCard
         expanded={props.expanded}
         heading={props.heading}
         helperText={props.helperText}
-        expandedContent={props.expandedContent}
-        disabled={props.disabled}
-        collapsable={props.collapsable}
-        focusable={props.focusable}
-      />
+        leadingContent={props.leadingContent?.variant}
+        numericValue={props.numericalValue}
+        badge={props.badge}
+      >
+        {props.content}
+      </ExpandableCard>
     ),
-  },
-)
+  }
+);

package/src/components/ExpandableCard/ExpandableCardGroup.figma.tsx

@@ -1,23 +1,40 @@
-import React from "react"
-import ExpandableCardGroup from "./ExpandableCardGroup"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { ExpandableCardGroup } from '../';
 
 figma.connect(
   ExpandableCardGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A7221",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7222-7221&m=dev',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?')
+      sectionHeader: figma.boolean('Section header?', {
+        true: figma.nestedProps('Section Header', {
+          heading: figma.string('Heading'),
+          helperText: figma.boolean('Helper text?', {
+            true: figma.string('Helper text'),
+          }),
+          trailingContent: figma.boolean('Trailing content?', {
+            true: figma.nestedProps('Trailing content', {
+              headerTrailingContent: figma.instance('Variant'),
+            }),
+          }),
+          invalidText: figma.enum('State', {
+            Invalid: figma.nestedProps('Validation Text', {
+              invalidText: figma.string('Text'),
+            }),
+          }),
+        }),
+      }),
+      cards: figma.children('Expandable Card'),
     },
-    example: (props) => <ExpandableCardGroup />,
-  },
-)
+    example: props => (
+      <ExpandableCardGroup
+        heading={props.sectionHeader?.heading}
+        helperText={props.sectionHeader?.helperText}
+        headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
+        invalidText={props.sectionHeader?.invalidText?.invalidText}
+      >
+        {props.cards}
+      </ExpandableCardGroup>
+    ),
+  }
+);

package/src/components/ExpandableCard/ExpandableCardGroup.props.ts

@@ -26,6 +26,11 @@ export interface ExpandableCardGroupProps extends ViewProps {
    * Test ID for testing
    */
   testID?: string;
+
+  /**
+   * Validation text displayed below the helper text when in an invalid state
+   */
+  invalidText?: string;
 }
 
 export default ExpandableCardGroupProps;

package/src/components/ExpandableCard/ExpandableCardGroup.tsx

@@ -10,6 +10,7 @@ const ExpandableCardGroup = ({
   children,
   style,
   testID = 'expandable-card-group',
+  invalidText,
   ...props
 }: ExpandableCardGroupProps) => {
   return (
@@ -19,6 +20,7 @@ const ExpandableCardGroup = ({
           heading={heading}
           helperText={helperText}
           trailingContent={headerTrailingContent}
+          invalidText={invalidText}
         />
       ) : null}
       <View style={styles.cardsContainer}>{children}</View>

package/src/components/HighlightBanner/HighlightBanner.figma.tsx

@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { HighlightBanner, Image } from '..';
+
+figma.connect(
+  HighlightBanner,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8306-4665&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      heading: figma.string('Heading'),
+      description: figma.string('Description'),
+      image: figma.boolean('Image?', {
+        true: <Image source={{ uri: '' }} />,
+      }),
+      headingColor: figma.enum('Heading color', {
+        Highlight: 'highlight',
+        Pig: 'pig',
+        Energy: 'energy',
+        Broadband: 'broadband',
+        Insurance: 'insurance',
+        Cashback: 'cashback',
+        Mobile: 'mobile',
+      }),
+      link: figma.boolean('Link?', {
+        true: figma.children('Link'),
+      }),
+      button: figma.boolean('Button?', {
+        true: figma.children('Button'),
+      }),
+    },
+    example: props => {
+      return (
+        // HighlightBanner doesn't need to be wrapped in a Card
+        // it's a standalone component in code please see the HighlightBanner docs
+        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-highlightbanner--docs
+        <HighlightBanner
+          heading={props.heading}
+          description={props.description}
+          image={props.image}
+          headingColor={props.headingColor}
+          link={props.link}
+          button={props.button}
+        />
+      );
+    },
+  }
+);