@utilitywarehouse/hearth-react-native 0.16.2 → 0.17.0

package/src/components/List/List.figma.tsx

@@ -1,31 +1,45 @@
-import React from "react"
-import List from "./List"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { List } from '../';
 
-/**
- * -- 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
- */
-
-figma.connect(
-  List,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2437%3A621",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      container: figma.enum("Container", {
-        None: "none",
-        "Subtle White": "subtleWhite",
-        "Emphasis White": "emphasisWhite",
-        "Subtle Warm White": "subtleWarmWhite",
-        "Emphasis Warm White": "emphasisWarmWhite",
+figma.connect(List, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2437%3A621', {
+  props: {
+    container: figma.enum('Container', {
+      'Subtle White': 'subtleWhite',
+      'Emphasis White': 'emphasisWhite',
+      'Subtle Warm White': 'subtleWarmWhite',
+      'Emphasis Warm White': 'emphasisWarmWhite',
+    }),
+    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'),
+          }),
+        }),
       }),
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?'),
-      // "listAction": figma.boolean('List action?')
-    },
-    example: (props) => <List container={props.container} />,
+    }),
+    listItems: figma.children('List Item'),
+    listActions: figma.children('List Action'),
   },
-)
+  example: props => (
+    <List
+      container={props.container}
+      heading={props.sectionHeader?.heading}
+      helperText={props.sectionHeader?.helperText}
+      headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
+      invalidText={props.sectionHeader?.invalidText?.invalidText}
+    >
+      {props.listItems}
+      {props.listActions}
+    </List>
+  ),
+});

package/src/components/List/List.props.ts

@@ -7,6 +7,7 @@ interface ListProps extends ViewProps {
   headerTrailingContent?: React.ReactNode;
   disabled?: boolean;
   loading?: boolean;
+  invalidText?: string;
 }
 
 export default ListProps;

package/src/components/List/List.stories.tsx

@@ -233,6 +233,49 @@ export const WithCustomListItemComponent: Story = {
   ),
 };
 
+const CustomListAction = () => (
+  <ListAction
+    heading="Custom List Action"
+    onPress={() => console.log('Custom List Action pressed')}
+  />
+);
+
+const CustomNull = () => null;
+
+export const WithMappedCustomListItems: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const listData = [
+      { heading: 'Custom Item 1', helperText: 'Supporting text 1' },
+      { heading: 'Custom Item 2', helperText: 'Supporting text 2' },
+      { heading: 'Custom Item 3', helperText: 'Supporting text 3' },
+    ];
+
+    return (
+      <List container="subtleWarmWhite">
+        <CustomNull />
+        <ListItem
+          heading="Refer a friend"
+          helperText="Get rewarded with a friend"
+          leadingContent={<ListItemIcon as={UserMediumIcon} />}
+          trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+          onPress={() => console.log('Refer a friend pressed')}
+        />
+        {listData.map((item, index) => (
+          <CustomListItem key={index} />
+        ))}
+        {listData.map((item, index) => (
+          <CustomListAction key={index} />
+        ))}
+        <CustomListAction />
+        <CustomListAction />
+      </List>
+    );
+  },
+};
+
 export const WithListAction: Story = {
   parameters: {
     controls: { include: [] },

package/src/components/List/List.tsx

@@ -1,55 +1,22 @@
-import React, { ReactNode, useMemo } from 'react';
-import { View, ViewProps } from 'react-native';
+import React, { useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
-import { ListContext, ListFirstItemContext } from './List.context';
+import { ListContext } from './List.context';
 import type ListProps from './List.props';
-import { ListAction } from './ListAction';
-import { ListItem } from './ListItem';
 
-const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
-  let found = false;
-
-  const recursiveClone = (children: ReactNode): ReactNode => {
-    return React.Children.map(children, (child: ReactNode): ReactNode => {
-      if (!React.isValidElement(child)) return child;
-
-      // Check if the current element is the ListItem or ListAction and hasn't been marked yet
-      if (!found) {
-        if (child.type === ListItem || child.type === ListAction) {
-          found = true;
-          return (
-            <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>
-          );
-        }
-
-        // If the child has nested children, process them recursively
-        if (
-          React.isValidElement(child) &&
-          child.props &&
-          typeof child.props === 'object' &&
-          child.props !== null &&
-          'children' in child.props &&
-          child.props.children
-        ) {
-          const clonedChildren = recursiveClone((child.props as any).children);
-          return React.cloneElement(child, { children: clonedChildren } as any);
-        }
-
-        found = true;
-        return <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>;
-      }
-
-      return child;
-    });
-  };
-
-  return recursiveClone(children) as ViewProps['children'];
-};
-
-const List = ({ children, heading, helperText, headerTrailingContent, ...props }: ListProps) => {
+const List = ({
+  children,
+  heading,
+  helperText,
+  headerTrailingContent,
+  invalidText,
+  ...props
+}: ListProps) => {
   const { loading, disabled, container = 'none' } = props;
+  const orderRef = useRef<string[]>([]);
+  const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
     variant: 'subtle' | 'emphasis';
     colorScheme: 'neutralStrong' | 'neutralSubtle';
@@ -60,8 +27,27 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
         ? 'neutralStrong'
         : 'neutralSubtle',
   };
-  const updatedChildren = markFirstListItem(children);
-  const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
+
+  const registerItem = useCallback((id: string) => {
+    if (!orderRef.current.includes(id)) {
+      orderRef.current.push(id);
+    }
+    const nextFirst = orderRef.current[0];
+    setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+    return () => {
+      orderRef.current = orderRef.current.filter(currentId => currentId !== id);
+      const nextFirst = orderRef.current[0];
+      setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+    };
+  }, []);
+
+  const value = {
+    loading,
+    disabled,
+    container,
+    firstItemId,
+    registerItem,
+  };
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
@@ -71,14 +57,15 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
             heading={heading}
             helperText={helperText}
             trailingContent={headerTrailingContent}
+            invalidText={invalidText}
           />
         ) : null}
         {container === 'none' ? (
-          <View>{updatedChildren}</View>
+          <View>{children}</View>
         ) : (
-          React.Children.count(updatedChildren) > 0 && (
+          React.Children.count(children) > 0 && (
             <Card {...containerToCard} noPadding style={styles.card}>
-              <>{updatedChildren}</>
+              <>{children}</>
             </Card>
           )
         )}

package/src/components/List/ListAction/ListAction.figma.tsx

@@ -1,29 +1,21 @@
 import figma from '@figma/code-connect';
 import ListAction from './ListAction';
 
-/**
- * -- 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
- */
-
 figma.connect(
   ListAction,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9661%3A5128',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       heading: figma.string('Action heading'),
       disabled: figma.enum('State', {
         Disabled: true,
       }),
-      'aria-disabled': figma.enum('State', {
-        Disabled: true,
+      loading: figma.enum('State', {
+        Loading: true,
       }),
-      // No matching props could be found for these Figma properties:
-      // "actionHeading": figma.string('Action heading')
     },
-    example: props => <ListAction heading={props.heading} disabled={props.disabled} />,
+    example: props => (
+      <ListAction heading={props.heading} disabled={props.disabled} loading={props.loading} />
+    ),
   }
 );

package/src/components/List/ListAction/ListAction.props.ts

@@ -3,6 +3,7 @@ import type { PressableProps } from 'react-native';
 interface ListActionProps extends Omit<PressableProps, 'children'> {
   heading: string;
   disabled?: boolean;
+  loading?: boolean;
   variant?: 'subtle' | 'emphasis';
 }
 

package/src/components/List/ListAction/ListAction.tsx

@@ -1,8 +1,10 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, ViewStyle } from 'react-native';
+import { useId, useLayoutEffect } from 'react';
+import { Pressable, View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { Skeleton } from '../../Skeleton';
+import { useListContext } from '../List.context';
 import type ListActionProps from './ListAction.props';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
@@ -13,11 +15,12 @@ const ListActionRoot = ({
   heading,
   disabled,
   variant = 'subtle',
+  loading,
   ...props
 }: ListActionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
-  const isFirstContext = useListFirstItemContext();
+  const { registerItem, firstItemId } = listContext;
 
   const { active } = props.states || { active: false };
 
@@ -33,6 +36,17 @@ const ListActionRoot = ({
 
   const isDisabled = disabled || listContext?.disabled || false;
   const listItemVariant = getListContainer() || variant;
+  const actionId = useId();
+
+  useLayoutEffect(() => {
+    if (!registerItem) {
+      return;
+    }
+
+    return registerItem(actionId);
+  }, [actionId, registerItem]);
+
+  const isFirstChild = firstItemId === actionId;
 
   const testID = props.testID || 'list-action';
 
@@ -41,7 +55,7 @@ const ListActionRoot = ({
     disabled: isDisabled,
     active,
     showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: isFirstContext,
+    isFirstChild,
     container: listContext?.container,
   });
 
@@ -52,12 +66,21 @@ const ListActionRoot = ({
       style={[styles.container, props.style as ViewStyle]}
       disabled={isDisabled || !onPress}
     >
-      <ListActionContent>
-        <ListActionText>{heading}</ListActionText>
-      </ListActionContent>
-      <ListActionTrailingContent style={styles.centeredTrailingIcon}>
-        <ListActionTrailingIcon as={ChevronRightSmallIcon} />
-      </ListActionTrailingContent>
+      {loading ? (
+        <View style={styles.loadingWrap}>
+          <Skeleton style={{ flex: 1, maxWidth: 166 }} width="auto" height={24} borderRadius="sm" />
+          <Skeleton width={24} height={24} borderRadius="sm" />
+        </View>
+      ) : (
+        <>
+          <ListActionContent>
+            <ListActionText>{heading}</ListActionText>
+          </ListActionContent>
+          <ListActionTrailingContent style={styles.centeredTrailingIcon}>
+            <ListActionTrailingIcon as={ChevronRightSmallIcon} />
+          </ListActionTrailingContent>
+        </>
+      )}
     </Pressable>
   );
 };
@@ -129,6 +152,13 @@ const styles = StyleSheet.create(theme => ({
   centeredTrailingIcon: {
     justifyContent: 'center',
   },
+  loadingWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    gap: theme.space['200'],
+  },
 }));
 
 export default ListAction;

package/src/components/List/ListItem/ListItem.figma.tsx

@@ -1,40 +1,56 @@
 import figma from '@figma/code-connect';
-import ListItem from './ListItem';
-
-/**
- * -- 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 { ListItem } from '../';
 
 figma.connect(ListItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628', {
   props: {
-    // These props were automatically mapped based on your linked code:
     loading: figma.enum('State', {
       Loading: true,
     }),
     disabled: figma.enum('State', {
       Disabled: true,
     }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    leadingContent: figma.boolean('Leading content?', {
+      true: figma.nestedProps('Leading content', {
+        variant: figma.enum('Variant', {
+          Icon: figma.instance('Icon-24'),
+          'Icon Container': figma.children('Icon Container'),
+          Avatar: figma.children('Avatar'),
+          Indicator: figma.children('Indicator'),
+        }),
+      }),
+    }),
+    trailingContent: figma.boolean('Trailing Content?', {
+      true: figma.nestedProps('Trailing content', {
+        variant: figma.enum('Variant', {
+          Icon: figma.instance('Icon-20'),
+          Link: figma.children('Link'),
+          Button: figma.children('Button'),
+          Switch: figma.children('Switch'),
+          Transaction: figma.children('Transaction'),
+        }),
+      }),
+    }),
+    heading: figma.string('List heading'),
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+    }),
+    badge: figma.boolean('Badge?', {
+      true: figma.children('Badge'),
+    }),
+    numericValue: figma.boolean('Numerical value?', {
+      true: figma.string('Numerical value'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "listHeading": figma.string('List heading'),
-    // "helperText": figma.boolean('Helper text?'),
-    // "helperText": figma.string('Helper text'),
-    // "customContent": figma.instance('Custom content'),
-    // "badge": figma.boolean('Badge?'),
-    // "leadingContent": figma.boolean('Leading content?'),
-    // "trailingContent": figma.boolean('Trailing Content?'),
-    // "numericalValue": figma.boolean('Numerical value?'),
-    // "numericalValue": figma.string('Numerical value'),
-    // "variant": figma.enum('Variant', {
-    //   "Default": "default",
-    //   "Custom": "custom"
-    // }),
-    // "paddingNone": figma.boolean('Padding None?')
   },
-  example: props => <ListItem loading={props.loading} disabled={props.disabled} />,
+  example: props => (
+    <ListItem
+      heading={props.heading}
+      helperText={props.helperText}
+      badge={props.badge}
+      numericValue={props.numericValue}
+      loading={props.loading}
+      disabled={props.disabled}
+      leadingContent={props.leadingContent?.variant}
+      trailingContent={props.trailingContent?.variant}
+    />
+  ),
 });

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -1,10 +1,10 @@
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
+import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { useListContext } from '../List.context';
 import { IListItemContext, ListItemContext } from './ListItem.context';
 import type ListItemProps from './ListItem.props';
 import ListItemContent from './ListItemContent';
@@ -33,8 +33,19 @@ const ListItemRoot = ({
 }: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
-  const isFirstContext = useListFirstItemContext();
+  const { registerItem, firstItemId } = listContext;
   const { active } = states || { active: false };
+  const itemId = useId();
+
+  useLayoutEffect(() => {
+    if (!registerItem) {
+      return;
+    }
+
+    return registerItem(itemId);
+  }, [itemId, registerItem]);
+
+  const isFirstChild = firstItemId === itemId;
 
   const getListContainer = (): ListItemProps['variant'] => {
     if (listContext?.container?.includes('subtle')) {
@@ -60,7 +71,7 @@ const ListItemRoot = ({
     active,
     disabled: isDisabled || isLoading,
     showDisabled: !listContext.disabled && disabled,
-    isFirstChild: isFirstContext,
+    isFirstChild,
     container: listContext?.container,
   });
 

package/src/utils/isThemedImageProps.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from 'react-native';
-import { ThemedImageProps } from 'src/components';
+import { ThemedImageProps } from '../components';
 
 const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
   return 'light' in props && 'dark' in props;

package/src/components/InlineLink/InlineLink.figma.tsx

@@ -1,33 +0,0 @@
-import React from "react"
-import InlineLink from "./InlineLink"
-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
- */
-
-figma.connect(
-  InlineLink,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7051%3A25641",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      inverted: figma.boolean("Inverted?"),
-      disabled: figma.enum("State", {
-        Active: true,
-      }),
-      // No matching props could be found for these Figma properties:
-      // "iconLeft": figma.boolean('Icon left?'),
-      // "iconRight": figma.boolean('Icon right?'),
-      // "iconRight": figma.instance('Icon Right'),
-      // "iconLeft": figma.instance('Icon Left'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <InlineLink inverted={props.inverted} disabled={props.disabled} />
-    ),
-  },
-)