@utilitywarehouse/hearth-react-native 0.16.2 → 0.17.0

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -2,9 +2,12 @@ import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
+import { BodyText } from '../../';
 import { Badge } from '../../Badge';
 import { Flex } from '../../Flex';
 import Card from '../Card';
+import CardActions from '../CardActions';
+import CardContent from '../CardContent';
 import CardAction from './CardAction';
 
 const meta: Meta<typeof CardAction> = {
@@ -74,9 +77,11 @@ export const Playground: Story = {
     // @ts-expect-error - This is a playground
     const trailingIcon = args.trailingIcon === 'none' ? undefined : Icons[args.trailingIcon];
     return (
-      <View style={{ width: '100%', maxWidth: 400 }}>
+      <View style={{ width: '100%', maxWidth: 400, gap: 16 }}>
         <Card variant="emphasis">
-          <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+          <CardActions>
+            <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+          </CardActions>
         </Card>
       </View>
     );
@@ -90,12 +95,14 @@ export const WithLeadingIcon: Story = {
   render: () => (
     <View style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Bills"
-          helperText="View your bills"
-          leadingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Bills"
+            helperText="View your bills"
+            leadingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </View>
   ),
@@ -108,12 +115,14 @@ export const WithTrailingIcon: Story = {
   render: () => (
     <View style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Bills"
-          helperText="View your bills"
-          trailingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Bills"
+            helperText="View your bills"
+            trailingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </View>
   ),
@@ -127,33 +136,35 @@ export const WithIconContainer: Story = {
   render: () => (
     <View style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Electricity"
-          helperText="Last reading 23/03/24"
-          leadingIcon={ElectricityMediumIcon}
-          iconContainer
-          iconContainerVariant="emphasis"
-          iconContainerColor="energy"
-          onPress={() => console.log('pressed')}
-        />
-        <CardAction
-          heading="Gas"
-          helperText="Last reading 23/03/24"
-          leadingIcon={GasMediumIcon}
-          iconContainer
-          iconContainerVariant="emphasis"
-          iconContainerColor="energy"
-          onPress={() => console.log('pressed')}
-        />
-        <CardAction
-          heading="Gas"
-          helperText="Last reading 23/03/24"
-          leadingIcon={GasMediumIcon}
-          iconContainer
-          iconContainerVariant="emphasis"
-          iconContainerColor="energy"
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Electricity"
+            helperText="Last reading 23/03/24"
+            leadingIcon={ElectricityMediumIcon}
+            iconContainer
+            iconContainerVariant="emphasis"
+            iconContainerColor="energy"
+            onPress={() => console.log('pressed')}
+          />
+          <CardAction
+            heading="Gas"
+            helperText="Last reading 23/03/24"
+            leadingIcon={GasMediumIcon}
+            iconContainer
+            iconContainerVariant="emphasis"
+            iconContainerColor="energy"
+            onPress={() => console.log('pressed')}
+          />
+          <CardAction
+            heading="Gas"
+            helperText="Last reading 23/03/24"
+            leadingIcon={GasMediumIcon}
+            iconContainer
+            iconContainerVariant="emphasis"
+            iconContainerColor="energy"
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </View>
   ),
@@ -166,34 +177,40 @@ export const WithBadge: Story = {
   render: () => (
     <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Badge at bottom"
-          helperText="Badge positioned below text"
-          leadingIcon={ElectricityMediumIcon}
-          badge={<Badge text="New" />}
-          badgePosition="bottom"
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Badge at bottom"
+            helperText="Badge positioned below text"
+            leadingIcon={ElectricityMediumIcon}
+            badge={<Badge text="New" />}
+            badgePosition="bottom"
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
       <Card variant="emphasis">
-        <CardAction
-          heading="Badge at middle"
-          helperText="Badge positioned between heading and helper text"
-          leadingIcon={ElectricityMediumIcon}
-          badge={<Badge text="New" />}
-          badgePosition="middle"
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Badge at middle"
+            helperText="Badge positioned between heading and helper text"
+            leadingIcon={ElectricityMediumIcon}
+            badge={<Badge text="New" />}
+            badgePosition="middle"
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
       <Card variant="emphasis">
-        <CardAction
-          heading="Badge at right"
-          helperText="Badge positioned on the right side"
-          leadingIcon={ElectricityMediumIcon}
-          badge={<Badge text="New" />}
-          badgePosition="right"
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Badge at right"
+            helperText="Badge positioned on the right side"
+            leadingIcon={ElectricityMediumIcon}
+            badge={<Badge text="New" />}
+            badgePosition="right"
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </Flex>
   ),
@@ -206,22 +223,26 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Medium size (default)"
-          helperText="Heading size is md"
-          size="md"
-          leadingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Medium size (default)"
+            helperText="Heading size is md"
+            size="md"
+            leadingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
       <Card variant="emphasis">
-        <CardAction
-          heading="Large size"
-          helperText="Heading size is lg"
-          size="lg"
-          leadingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Large size"
+            helperText="Heading size is lg"
+            size="lg"
+            leadingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </Flex>
   ),
@@ -234,13 +255,15 @@ export const Loading: Story = {
   render: () => (
     <View style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Loading"
-          helperText="This is loading"
-          loading
-          leadingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Loading"
+            helperText="This is loading"
+            loading
+            leadingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </View>
   ),
@@ -253,14 +276,137 @@ export const Disabled: Story = {
   render: () => (
     <View style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
-        <CardAction
-          heading="Disabled"
-          helperText="This is disabled"
-          disabled
-          leadingIcon={ElectricityMediumIcon}
-          onPress={() => console.log('pressed')}
-        />
+        <CardActions>
+          <CardAction
+            heading="Disabled"
+            helperText="This is disabled"
+            disabled
+            leadingIcon={ElectricityMediumIcon}
+            onPress={() => console.log('pressed')}
+          />
+        </CardActions>
       </Card>
     </View>
   ),
 };
+
+const CustomAction = ({ heading, ...props }: { heading: string }) => {
+  return <CardAction key={heading} heading={heading} {...props} onPress={() => null} />;
+};
+
+const CustomComponent = () => <BodyText>Multiple CardActions within a Card:</BodyText>;
+
+export const WithCustomActions: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: (args: any) => {
+    // @ts-expect-error - This is a playground
+    const leadingIcon = args.leadingIcon === 'none' ? undefined : Icons[args.leadingIcon];
+    // @ts-expect-error - This is a playground
+    const trailingIcon = args.trailingIcon === 'none' ? undefined : Icons[args.trailingIcon];
+
+    const actions = [{ text: 'Action 1' }, { text: 'Action 2' }, { text: 'Action 3' }];
+    return (
+      <View style={{ width: '100%', maxWidth: 400, gap: 16 }}>
+        {/* Example 1 */}
+        <Card variant="emphasis">
+          <BodyText>Multiple CardActions within a Card:</BodyText>
+          <CardActions>
+            {actions.map(action => (
+              <CustomAction
+                key={action.text}
+                {...args}
+                heading={action.text}
+                leadingIcon={leadingIcon}
+                trailingIcon={trailingIcon}
+              />
+            ))}
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+          </CardActions>
+        </Card>
+        {/* Example 2 */}
+        <Card variant="emphasis">
+          <CardActions>
+            {actions.map(action => (
+              <CustomAction
+                key={action.text}
+                {...args}
+                heading={action.text}
+                leadingIcon={leadingIcon}
+                trailingIcon={trailingIcon}
+              />
+            ))}
+          </CardActions>
+        </Card>
+        {/* Example 3 */}
+        <Card variant="emphasis">
+          <CardActions>
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+          </CardActions>
+        </Card>
+        {/* Example 4 */}
+        <Card variant="emphasis">
+          <BodyText>Multiple CardActions within a Card:</BodyText>
+        </Card>
+        {/* Example 5 */}
+        <Card variant="emphasis">
+          <BodyText>Multiple CardActions within a Card:</BodyText>
+          <CardActions>
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+          </CardActions>
+        </Card>
+        {/* Example 6 */}
+        <Card variant="emphasis">
+          <CardContent>
+            <CustomComponent />
+          </CardContent>
+          <CardActions>
+            {actions.map(action => (
+              <CustomAction
+                key={action.text}
+                {...args}
+                heading={action.text}
+                leadingIcon={leadingIcon}
+                trailingIcon={trailingIcon}
+              />
+            ))}
+            <CardAction
+              {...args}
+              leadingIcon={leadingIcon}
+              trailingIcon={trailingIcon}
+              onPress={() => null}
+            />
+          </CardActions>
+        </Card>
+      </View>
+    );
+  },
+};

package/src/components/Card/CardAction/CardActionRoot.tsx

@@ -1,10 +1,11 @@
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
+import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable, View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { IconContainer } from '../../IconContainer';
 import { Skeleton } from '../../Skeleton';
 import { useCardContext } from '../Card.context';
+import { useCardActionsContext } from '../CardActions.context';
 import { CardActionContext, ICardActionContext } from './CardAction.context';
 import type CardActionProps from './CardAction.props';
 import CardActionContent from './CardActionContent';
@@ -45,7 +46,19 @@ const CardActionRoot = ({
   const loadingTestID = isLoading ? `${testID}-loading` : testID;
 
   const { variant, hasOnlyActions } = useCardContext();
-  const isFirst = props.isFirst;
+  const actionId = useId();
+  const actionsContext = useCardActionsContext();
+
+  useLayoutEffect(() => {
+    if (!actionsContext) {
+      return;
+    }
+
+    return actionsContext.registerAction(actionId);
+  }, [actionId, actionsContext]);
+
+  const isFirstFromContext = actionsContext?.firstActionId === actionId;
+  const isFirst = props.isFirst ?? isFirstFromContext;
 
   styles.useVariants({
     showPressed,

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export interface CardActionsContextValue {
+  firstActionId?: string;
+  registerAction: (id: string) => () => void;
+}
+
+export const CardActionsContext = createContext<CardActionsContextValue | null>(null);
+
+export const useCardActionsContext = (): CardActionsContextValue | null => {
+  return useContext(CardActionsContext);
+};

package/src/components/Card/CardActions.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useCallback, useRef, useState } from 'react';
+import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { CardActionsContext } from './CardActions.context';
+
+const CardActions = ({ children, style, ...props }: PropsWithChildren<ViewProps>) => {
+  const orderRef = useRef<string[]>([]);
+  const [firstActionId, setFirstActionId] = useState<string | undefined>(undefined);
+
+  const registerAction = useCallback((id: string) => {
+    if (!orderRef.current.includes(id)) {
+      orderRef.current.push(id);
+    }
+    const nextFirst = orderRef.current[0];
+    setFirstActionId(prev => (prev === nextFirst ? prev : nextFirst));
+    return () => {
+      orderRef.current = orderRef.current.filter(currentId => currentId !== id);
+      const nextFirst = orderRef.current[0];
+      setFirstActionId(prev => (prev === nextFirst ? prev : nextFirst));
+    };
+  }, []);
+
+  return (
+    <CardActionsContext.Provider value={{ firstActionId, registerAction }}>
+      <View {...props} style={[styles.container, style]}>
+        {children}
+      </View>
+    </CardActionsContext.Provider>
+  );
+};
+
+CardActions.displayName = 'CardActions';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+});
+
+export default CardActions;