@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,40 @@
+import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardContext } from './Card.context';
+
+const CardContent = ({ children, style, ...props }: ViewProps) => {
+  const { noPadding, space } = useCardContext();
+  styles.useVariants({
+    noPadding,
+    space,
+  });
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+CardContent.displayName = 'CardContent';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      space: theme.globalStyle.variants.space,
+      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,
+          },
+        },
+      },
+    },
+  },
+}));
+
+export default CardContent;

package/src/components/Card/CardPressHandler.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface CardPressHandlerContextProps {
+  pressed?: boolean;
+}
+
+export const CardPressHandlerContext = createContext<CardPressHandlerContextProps>({});
+
+export const useCardPressHandlerContext = (): CardPressHandlerContextProps => {
+  const context = useContext(CardPressHandlerContext);
+  return context;
+};

package/src/components/Card/CardPressHandler.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren, useMemo } from 'react';
+import { useCardContext } from './Card.context';
+import { CardPressHandlerContext } from './CardPressHandler.context';
+
+const CardPressHandler = ({ children }: PropsWithChildren<{ handlerToInherit?: string }>) => {
+  const { pressed } = useCardContext();
+  const context = useMemo(
+    () => ({
+      pressed,
+    }),
+    [pressed]
+  );
+  return (
+    <CardPressHandlerContext.Provider value={context}>{children}</CardPressHandlerContext.Provider>
+  );
+};
+
+CardPressHandler.displayName = 'CardPressHandler';
+
+export default CardPressHandler;

package/src/components/Card/CardRoot.tsx

@@ -4,6 +4,72 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
 import CardProps from './Card.props';
+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 = (
@@ -14,15 +80,15 @@ const collectChildActionHandlers = (
       if (React.isValidElement(child)) {
         const childProps = child.props as any;
         // @ts-expect-error - type
-        if (child.type.displayName === 'CardAction') {
+        if (child.type.displayName === 'CardPressHandler') {
           const actionChildren = React.Children.toArray(childProps.children);
-          const actionToInherit = childProps['actionToInherit'] || 'onPress';
+          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
           const firstChild = actionChildren[0];
           if (
             React.isValidElement(firstChild) &&
-            typeof (firstChild.props as any)[actionToInherit] === 'function'
+            typeof (firstChild.props as any)[handlerToInherit] === 'function'
           ) {
-            handlers.push((firstChild.props as any)[actionToInherit]);
+            handlers.push((firstChild.props as any)[handlerToInherit]);
           }
         }
         if (childProps.children) {
@@ -48,6 +114,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');
   // Extract style props using our custom hook
   const { computedStyles, remainingProps } = useStyleProps(rest);
 
@@ -62,22 +130,69 @@ 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;
+
+  const context = useMemo(
+    () => ({
+      pressed: showPressed && active,
+      noPadding,
+      hasActions,
+      hasContent,
+      hasOnlyActions,
+      space,
+      variant,
+    }),
+    [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]
+  );
+
   styles.useVariants({
     variant,
     colorScheme,
-    noPadding,
+    noPadding: noPadding || hasActions || hasContent,
     active,
     showPressed,
     disabled,
-    space,
+    space: hasActions || hasContent ? 'none' : space,
   });
 
-  const context = useMemo(
-    () => ({
-      pressed: showPressed && active,
-    }),
-    [showPressed, active]
-  );
+  const renderChildren = () => {
+    // Default: render children as-is
+    if (hasContent || !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;
+    }
+
+    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 (
     <CardContext.Provider value={context}>
       <Pressable
@@ -88,7 +203,7 @@ const Card = ({
         accessible={showPressed}
         importantForAccessibility={showPressed ? 'yes' : 'no'}
       >
-        {children}
+        {renderChildren()}
       </Pressable>
     </CardContext.Provider>
   );

package/src/components/Card/index.ts

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

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -11,7 +11,8 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as any, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as ViewStyle, style] as any)
       }
     />

package/src/components/Container/Container.docs.mdx

@@ -0,0 +1,168 @@
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Box, Container } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Container.stories';
+
+<Meta title="Primitives / Container" />
+
+<BackToTopButton />
+
+# Container
+
+The Container component is a layout primitive that provides consistent spacing and structure using the design system's layout tokens. It automatically applies responsive margin and padding based on the current breakpoint, and supports additional customization through spacing props.
+
+- [Playground](#playground)
+- [Usage](#usage)
+  - [Basic Usage](#basic-usage)
+  - [With Custom Padding](#with-custom-padding)
+  - [With Custom Margin](#with-custom-margin)
+  - [With Custom Spacing](#with-custom-spacing)
+- [Props](#props)
+- [Design Tokens](#design-tokens)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+### Basic Usage
+
+The Container component uses layout tokens automatically for responsive spacing:
+
+<UsageWrap>
+  <Container backgroundColor="backgroundSecondary">
+    <Box bg="blue400" p="200" borderRadius="md">
+      <BodyText>Container content</BodyText>
+    </Box>
+  </Container>
+</UsageWrap>
+
+```jsx
+import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Container>
+    <Box bg="cyan400" p="200" borderRadius="md">
+      <BodyText>Container content</BodyText>
+    </Box>
+  </Container>
+);
+```
+
+### With Custom Padding
+
+You can override the default padding with custom values using space tokens:
+
+<Canvas of={Stories.WithPadding} />
+
+```jsx
+import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Container padding="300">
+    <Box bg="cyan400" p="200" borderRadius="md">
+      <BodyText>Container with padding</BodyText>
+    </Box>
+  </Container>
+);
+```
+
+### With Custom Margin
+
+You can override the default margin with custom values using space tokens:
+
+<Canvas of={Stories.WithMargin} />
+
+```jsx
+import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Container margin="300">
+    <Box bg="cyan400" p="200" borderRadius="md">
+      <BodyText>Container with margin</BodyText>
+    </Box>
+  </Container>
+);
+```
+
+### With Custom Spacing
+
+The Container component supports a `space` prop for controlling gap between child elements, as well as directional padding and margin props:
+
+<Canvas of={Stories.WithCustomSpacing} />
+
+```jsx
+import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Container space="xl" paddingHorizontal="200" paddingVertical="300">
+    <Box bg="cyan400" p="200" borderRadius="md">
+      <BodyText>Item 1</BodyText>
+    </Box>
+    <Box bg="purple400" p="200" borderRadius="md">
+      <BodyText>Item 2</BodyText>
+    </Box>
+    <Box bg="pink400" p="200" borderRadius="md">
+      <BodyText>Item 3</BodyText>
+    </Box>
+  </Container>
+);
+```
+
+## Props
+
+The Container component supports spacing props similar to the Box component, with both long-form and shorthand syntax:
+
+### Spacing Props
+
+| Name                | Shorthand | Type         | Default | Description                              |
+| ------------------- | --------- | ------------ | ------- | ---------------------------------------- |
+| `padding`           | `p`       | `SpaceValue` | -       | The padding of the container.            |
+| `paddingHorizontal` | `px`      | `SpaceValue` | -       | The horizontal padding of the container. |
+| `paddingVertical`   | `py`      | `SpaceValue` | -       | The vertical padding of the container.   |
+| `paddingTop`        | `pt`      | `SpaceValue` | -       | The top padding of the container.        |
+| `paddingBottom`     | `pb`      | `SpaceValue` | -       | The bottom padding of the container.     |
+| `paddingLeft`       | `pl`      | `SpaceValue` | -       | The left padding of the container.       |
+| `paddingRight`      | `pr`      | `SpaceValue` | -       | The right padding of the container.      |
+| `margin`            | `m`       | `SpaceValue` | -       | The margin of the container.             |
+| `marginHorizontal`  | `mx`      | `SpaceValue` | -       | The horizontal margin of the container.  |
+| `marginVertical`    | `my`      | `SpaceValue` | -       | The vertical margin of the container.    |
+| `marginTop`         | `mt`      | `SpaceValue` | -       | The top margin of the container.         |
+| `marginBottom`      | `mb`      | `SpaceValue` | -       | The bottom margin of the container.      |
+| `marginLeft`        | `ml`      | `SpaceValue` | -       | The left margin of the container.        |
+| `marginRight`       | `mr`      | `SpaceValue` | -       | The right margin of the container.       |
+
+## Design Tokens
+
+The Container component uses the following layout tokens from the design system:
+
+### Mobile (320px - 740px)
+
+- **Margin Horizontal**: 16px
+- **Padding Top**: 24px
+- **Padding Bottom**: 32px
+
+### Tablet (740px - 992px)
+
+- **Margin Horizontal**: 32px
+- **Padding Top**: 24px
+- **Padding Bottom**: 32px
+
+### Desktop (992px+)
+
+- **Margin Horizontal**: 32px
+- **Padding Top**: 32px
+- **Padding Bottom**: 48px
+
+These values are automatically applied based on the current breakpoint. You can override them using the padding and margin props.
+
+### Space Tokens
+
+For the `padding`, `margin`, and directional spacing props, you can use any of the following space token values:
+
+`'0'`, `'25'`, `'50'`, `'75'`, `'100'`, `'150'`, `'175'`, `'200'`, `'250'`, `'300'`, `'350'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`, `'1000'`
+
+These correspond to pixel values: 0px, 2px, 4px, 6px, 8px, 12px, 14px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 56px, 64px, 72px, 80px respectively.

package/src/components/Container/Container.props.ts

@@ -0,0 +1,89 @@
+import type { ViewProps } from 'react-native';
+import { SpaceValue, SpacingValues } from '../../types';
+
+interface ContainerProps extends ViewProps {
+  /**
+   * The padding of the container.
+   */
+  padding?: SpaceValue;
+  /**
+   * The horizontal padding of the container.
+   */
+  paddingHorizontal?: SpaceValue;
+  /**
+   * The vertical padding of the container.
+   */
+  paddingVertical?: SpaceValue;
+  /**
+   * The top padding of the container.
+   */
+  paddingTop?: SpaceValue;
+  /**
+   * The bottom padding of the container.
+   */
+  paddingBottom?: SpaceValue;
+  /**
+   * The left padding of the container.
+   */
+  paddingLeft?: SpaceValue;
+  /**
+   * The right padding of the container.
+   */
+  paddingRight?: SpaceValue;
+  /**
+   * The margin of the container.
+   */
+  margin?: SpaceValue;
+  /**
+   * The horizontal margin of the container.
+   */
+  marginHorizontal?: SpaceValue;
+  /**
+   * The vertical margin of the container.
+   */
+  marginVertical?: SpaceValue;
+  /**
+   * The top margin of the container.
+   */
+  marginTop?: SpaceValue;
+  /**
+   * The bottom margin of the container.
+   */
+  marginBottom?: SpaceValue;
+  /**
+   * The left margin of the container.
+   */
+  marginLeft?: SpaceValue;
+  /**
+   * The right margin of the container.
+   */
+  marginRight?: SpaceValue;
+  // Padding
+  p?: SpaceValue;
+  px?: SpaceValue;
+  py?: SpaceValue;
+  pt?: SpaceValue;
+  pb?: SpaceValue;
+  pl?: SpaceValue;
+  pr?: SpaceValue;
+  // Margin
+  m?: SpaceValue;
+  mx?: SpaceValue;
+  my?: SpaceValue;
+  mt?: SpaceValue;
+  mb?: SpaceValue;
+  ml?: SpaceValue;
+  mr?: SpaceValue;
+  /**
+   * The space between child elements (gap).
+   */
+  space?: SpacingValues;
+  /**
+   * The space between child elements.
+   */
+  gap?: SpaceValue;
+  backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+  bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+}
+
+export default ContainerProps;