@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/src/components/Card/CardRoot.tsx

@@ -1,357 +0,0 @@
-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';
-import {
-  checkForComponentType,
-  collectChildActionHandlers,
-  extractCardActions,
-  filterChildren,
-  hasOnlyPotentialActions,
-} from './helpers';
-
-const Card = ({
-  children,
-  variant = 'subtle',
-  colorScheme = 'neutralStrong',
-  shadowColor,
-  noPadding = false,
-  style,
-  states,
-  spacing,
-  space,
-  disabled = false,
-  onPress,
-  ...rest
-}: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const { active } = states || { active: false };
-  const childActionHandlers = collectChildActionHandlers(children as ReactNode);
-  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);
-
-  const handlePress = (e: GestureResponderEvent) => {
-    if (onPress) {
-      onPress(e);
-    }
-
-    childActionHandlers.forEach(fn => fn(e));
-  };
-
-  const inheritChildAction = childActionHandlers.length > 0;
-  const showPressed = inheritChildAction || !!onPress;
-
-  // Check if all children are action groups (CardActions)
-  const potentiallyOnlyActions = hasOnlyPotentialActions(children as ReactNode, CardActions);
-  const hasOnlyActions = potentiallyOnlyActions && !hasContent;
-
-  const context = useMemo(
-    () => ({
-      pressed: showPressed && active,
-      noPadding,
-      hasActions,
-      hasContent,
-      hasOnlyActions,
-      spacing: space ?? spacing,
-      variant,
-    }),
-    [
-      showPressed,
-      active,
-      hasActions,
-      hasContent,
-      hasOnlyActions,
-      noPadding,
-      space,
-      spacing,
-      variant,
-    ]
-  );
-
-  styles.useVariants({
-    variant,
-    colorScheme,
-    noPadding: noPadding || hasActions || hasContent || hasOnlyActions,
-    active,
-    showPressed,
-    disabled,
-    spacing: hasActions || hasContent || hasOnlyActions ? 'none' : spacing,
-    shadowColor,
-  });
-
-  const renderChildren = () => {
-    // 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;
-    }
-
-    // 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);
-
-    return (
-      <>
-        <CardContent>{filteredNonActionChildren as ReactNode}</CardContent>
-        {cardActions}
-      </>
-    );
-  };
-
-  return (
-    <CardContext.Provider value={context}>
-      <Pressable
-        {...remainingProps}
-        disabled={disabled}
-        style={[styles.card, computedStyles, style as ViewStyle]}
-        onPress={handlePress}
-        accessible={showPressed}
-        importantForAccessibility={showPressed ? 'yes' : 'no'}
-      >
-        {renderChildren()}
-      </Pressable>
-    </CardContext.Provider>
-  );
-};
-
-Card.displayName = 'Card';
-
-const styles = StyleSheet.create(theme => ({
-  card: {
-    overflow: 'hidden',
-    borderRadius: theme.components.card.borderRadius,
-    variants: {
-      spacing: theme.globalStyle.variants.spacing,
-      variant: {
-        subtle: {
-          borderWidth: theme.components.card.neutral.subtle.borderWidth,
-          borderColor: theme.color.border.subtle,
-        },
-        emphasis: {
-          borderWidth: theme.components.card.neutral.emphasis.borderWidth,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      colorScheme: {
-        neutralStrong: {
-          backgroundColor: theme.color.surface.neutral.strong,
-        },
-        neutralSubtle: {
-          backgroundColor: theme.color.surface.neutral.subtle,
-        },
-        brand: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        energy: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        broadband: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        mobile: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        insurance: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        cashback: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        pig: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-        highlight: {
-          borderWidth: theme.components.card.brand.borderWidth,
-        },
-      },
-      shadowColor: {
-        functional: {
-          boxShadow: theme.helpers.shadow.functional,
-        },
-        brand: {
-          boxShadow: theme.helpers.shadow.brand,
-        },
-        energy: {
-          boxShadow: theme.helpers.shadow.energy,
-        },
-        broadband: {
-          boxShadow: theme.helpers.shadow.broadband,
-        },
-        mobile: {
-          boxShadow: theme.helpers.shadow.mobile,
-        },
-        insurance: {
-          boxShadow: theme.helpers.shadow.insurance,
-        },
-        cashback: {
-          boxShadow: theme.helpers.shadow.cashback,
-        },
-        pig: {
-          boxShadow: theme.helpers.shadow.pig,
-        },
-      },
-      noPadding: {
-        true: {
-          padding: theme.components.card.mobile.paddingNone,
-        },
-        false: {
-          padding: {
-            base: theme.components.card.mobile.padding,
-            md: theme.components.card.tablet.padding,
-            lg: theme.components.card.desktop.padding,
-          },
-        },
-      },
-      active: {
-        true: {},
-      },
-      showPressed: {
-        true: {},
-        false: {
-          cursor: 'auto',
-        },
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'subtle',
-        colorScheme: 'brand',
-        styles: {
-          backgroundColor: theme.color.surface.brand.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'brand',
-        styles: {
-          backgroundColor: theme.color.surface.brand.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'energy',
-        styles: {
-          backgroundColor: theme.color.surface.energy.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'energy',
-        styles: {
-          backgroundColor: theme.color.surface.energy.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'broadband',
-        styles: {
-          backgroundColor: theme.color.surface.broadband.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'broadband',
-        styles: {
-          backgroundColor: theme.color.surface.broadband.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'mobile',
-        styles: {
-          backgroundColor: theme.color.surface.mobile.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'mobile',
-        styles: {
-          backgroundColor: theme.color.surface.mobile.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'insurance',
-        styles: {
-          backgroundColor: theme.color.surface.insurance.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'insurance',
-        styles: {
-          backgroundColor: theme.color.surface.insurance.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'cashback',
-        styles: {
-          backgroundColor: theme.color.surface.cashback.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'cashback',
-        styles: {
-          backgroundColor: theme.color.surface.cashback.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'pig',
-        styles: {
-          backgroundColor: theme.color.surface.pig.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'pig',
-        styles: {
-          backgroundColor: theme.color.surface.pig.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'subtle',
-        colorScheme: 'highlight',
-        styles: {
-          backgroundColor: theme.color.surface.highlight.subtle,
-          borderColor: theme.color.border.strong,
-        },
-      },
-      {
-        variant: 'emphasis',
-        colorScheme: 'highlight',
-        styles: {
-          backgroundColor: theme.color.surface.highlight.default,
-          borderColor: theme.color.border.strong,
-        },
-      },
-    ],
-  },
-}));
-
-export default Card;

package/src/components/Card/helpers.tsx

@@ -1,195 +0,0 @@
-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,7 +0,0 @@
-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/Carousel/Carousel.context.tsx

@@ -1,8 +0,0 @@
-import { createContext, useContext } from 'react';
-import { CarouselContextValue } from './Carousel.props';
-
-const CarouselContext = createContext<CarouselContextValue>({} as CarouselContextValue);
-
-export const useCarouselContext = () => useContext(CarouselContext);
-
-export default CarouselContext;

package/src/components/Carousel/Carousel.figma.tsx

@@ -1,22 +0,0 @@
-import figma from '@figma/code-connect';
-import { Carousel, CarouselItem } from '../';
-
-figma.connect(
-  Carousel,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=5191-3220&m=dev',
-  {
-    props: {
-      inverted: figma.boolean('Inverted?'),
-      showNavigation: figma.boolean('Arrows?'),
-    },
-    example: props => (
-      // Example usage of the Carousel component
-      // See https://hearth.prod.uw.systems/react-native/?path=/docs/components-carousel--docs
-      <Carousel width={300} inverted={props.inverted} showNavigation={props.showNavigation}>
-        <CarouselItem>Item 1</CarouselItem>
-        <CarouselItem>Item 2</CarouselItem>
-        <CarouselItem>Item 3</CarouselItem>
-      </Carousel>
-    ),
-  }
-);

package/src/components/Carousel/Carousel.props.ts

@@ -1,89 +0,0 @@
-import { ReactElement } from 'react';
-import { FlatListProps, PressableProps, ViewProps, ViewStyle } from 'react-native';
-
-export interface CarouselRef {
-  scrollToIndex: (params: { index: number; animated?: boolean | null }) => void;
-  scrollToOffset: (params: { offset: number; animated?: boolean | null }) => void;
-}
-
-export interface CarouselContextValue {
-  activeIndex: number;
-  numItems: number;
-  setActiveIndex: (index: number) => void;
-  setNumItems: (count: number) => void;
-  controlsAccessibilityHidden?: boolean;
-  inverted?: boolean;
-  disabled?: boolean;
-}
-
-export interface CarouselItemProps extends ViewProps {
-  active?: boolean;
-  key?: string | number;
-  inactiveOpacity?: number;
-  width?: number;
-}
-
-export interface CarouselProps
-  extends Omit<
-    FlatListProps<ReactElement<CarouselItemProps>>,
-    | 'accessibilityActions'
-    | 'accessibilityLabel'
-    | 'accessibilityRole'
-    | 'accessible'
-    | 'bounces'
-    | 'children'
-    | 'data'
-    | 'decelerationRate'
-    | 'getItemLayout'
-    | 'horizontal'
-    | 'pagingEnabled'
-    | 'onAccessibilityAction'
-    | 'onViewableItemsChanged'
-    | 'overScrollMode'
-    | 'renderItem'
-    | 'showsHorizontalScrollIndicator'
-    | 'snapToInterval'
-    | 'snapToAlignment'
-    | 'viewabilityConfig'
-    | 'style'
-  > {
-  activeIndex?: number;
-  centered?: boolean;
-  disabled?: boolean;
-  inactiveItemOpacity?: number;
-  itemWidth?: number;
-  onSnapToItem?: (index: number) => void;
-  showOverflow?: boolean;
-  width: number;
-  children?: ViewProps['children'];
-  itemsStyle?: FlatListProps<ReactElement<CarouselItemProps>>['style'];
-  style?: ViewStyle;
-  showControls?: boolean;
-  showNavigation?: boolean;
-  controlsStyle?: ViewProps['style'];
-  controlsItemStyle?: ViewProps['style'];
-  controlsActiveItemStyle?: ViewProps['style'];
-  controlsAccessibilityHidden?: boolean;
-  ref?: React.Ref<CarouselRef>;
-  inverted?: boolean;
-}
-
-export interface CarouselProviderProps {
-  initialActiveIndex?: number;
-}
-
-export interface CarouselControlsProps extends ViewProps {
-  itemStyle?: ViewProps['style'];
-  activeItemStyle?: ViewProps['style'];
-  showNavigation?: boolean;
-  onPressPrev?: () => void;
-  onPressNext?: () => void;
-  accessibilityHidden?: boolean;
-}
-
-export interface CarouselControlsItemProps extends Omit<PressableProps, 'style'> {
-  active: boolean;
-  index: number;
-  style?: ViewProps['style'];
-  activeStyle?: ViewProps['style'];
-}