@utilitywarehouse/hearth-react-native 0.16.2 → 0.18.0

package/src/components/Input/Input.figma.tsx

@@ -1,57 +1,123 @@
 import figma from '@figma/code-connect';
-import Input from './Input';
+import { Input } 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
- */
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  readonly: figma.enum('State', {
+    'Read-only': true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
 
 figma.connect(Input, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021', {
   props: {
-    // These props were automatically mapped based on your linked code:
-    disabled: figma.enum('State', {
-      Disabled: true,
+    ...props,
+    required: figma.boolean('Optional?', {
+      true: false,
+      false: true,
     }),
-    readonly: figma.enum('State', {
-      'Read-only': true,
+    prefix: figma.boolean('Prefix?', {
+      true: figma.string('Prefix'),
     }),
-    focused: figma.boolean('Focus?'),
-    placeholder: figma.string('Suffix'),
-    focusable: figma.boolean('Focus?'),
-    hasTVPreferredFocus: figma.boolean('Focus?'),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    suffix: figma.boolean('Suffix?', {
+      true: figma.string('Suffix'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "helperText": figma.boolean('Helper text?'),
-    // "label": figma.string('Label'),
-    // "validation": figma.string('Validation'),
-    // "helperText": figma.string('Helper text'),
-    // "value": figma.string('Value'),
-    // "suffix": figma.boolean('Suffix?'),
-    // "prefix": figma.boolean('Prefix?'),
-    // "prefix": figma.string('Prefix'),
-    // "suffix": figma.string('Suffix'),
-    // "optional": figma.boolean('Optional?'),
-    // "valueType": figma.enum('Value type', {
-    //   "Empty": "empty",
-    //   "Placeholder": "placeholder",
-    //   "Filled": "filled"
-    // }),
-    // "labelVariant": figma.enum('Label variant', {
-    //   "Body": "body",
-    //   "Heading": "heading"
-    // })
   },
   example: props => (
     <Input
       disabled={props.disabled}
       readonly={props.readonly}
-      focused={props.focused}
       placeholder={props.placeholder}
-      focusable={props.focusable}
+      value={props.value}
+      label={props.label}
+      labelVariant={props.labelVariant}
+      helperText={props.helperText}
+      required={props.required}
+      prefix={props.prefix}
+      suffix={props.suffix}
+      validationStatus={props.validationStatus}
+      invalidText={props.invalidText}
+      validText={props.validText}
     />
   ),
 });
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2251-10106&t=3uUSBVdxldgG5uz3-4',
+  {
+    props,
+    example: props => (
+      <Input
+        type="password"
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2161-1311&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      loading: figma.enum('State', {
+        Loading: true,
+      }),
+      placeholder: figma.enum('State', {
+        Placeholder: figma.string('Value'),
+      }),
+      value: figma.enum('State', {
+        Filled: figma.string('Value'),
+      }),
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+    },
+    example: props => (
+      <Input
+        type="search"
+        loading={props.loading}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        helperText={props.helperText}
+      />
+    ),
+  }
+);

package/src/components/Input/Input.props.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import React from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 
 // Base props common to all input types
@@ -47,6 +48,8 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
   onClear?: never;
   leadingIcon?: never;
   trailingIcon?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 // Base for inputs without children
@@ -55,6 +58,8 @@ interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputPr
   leadingIcon?: ComponentType;
   trailingIcon?: ComponentType;
   required?: boolean;
+  prefix?: string | number | React.ReactNode;
+  suffix?: string | number | React.ReactNode;
 }
 
 // Specific input types with their unique props
@@ -74,6 +79,8 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
   loading?: never;
   clearable?: never;
   onClear?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
@@ -83,6 +90,8 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
   onClear?: () => void;
   showPasswordToggle?: never;
   format?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 // Union of all input types

package/src/components/Input/Input.tsx

@@ -10,6 +10,7 @@ import {
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -54,6 +55,8 @@ const Input = forwardRef<TextInput, InputProps>(
       helperIcon,
       validText,
       invalidText,
+      prefix,
+      suffix,
       ...props
     },
     ref
@@ -169,6 +172,15 @@ const Input = forwardRef<TextInput, InputProps>(
                   <InputIcon as={leadingIconComponent} />
                 </InputSlot>
               )}
+              {!!prefix && (
+                <InputSlot>
+                  {typeof prefix === 'string' || typeof prefix === 'number' ? (
+                    <BodyText>{prefix}</BodyText>
+                  ) : (
+                    prefix
+                  )}
+                </InputSlot>
+              )}
               <InputField
                 // @ts-expect-error - ref forwarding issue
                 ref={inputRef}
@@ -197,6 +209,15 @@ const Input = forwardRef<TextInput, InputProps>(
                   />
                 </InputSlot>
               )}
+              {!!suffix && (
+                <InputSlot>
+                  {typeof suffix === 'string' || typeof suffix === 'number' ? (
+                    <BodyText>{suffix}</BodyText>
+                  ) : (
+                    suffix
+                  )}
+                </InputSlot>
+              )}
               {!!trailingIcon && (
                 <InputSlot>
                   <InputIcon as={trailingIcon} />

package/src/components/Link/Link.figma.tsx

@@ -1,42 +1,35 @@
-import React from "react"
-import Link from "./Link"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Link } 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(
-  Link,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      inverted: figma.boolean("Inverted?"),
-      disabled: figma.enum("State", {
-        Active: true,
+figma.connect(Link, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562', {
+  props: {
+    inverted: figma.boolean('Inverted?'),
+    showIcon: figma.boolean('Icon right?', {
+      false: figma.boolean('Icon left?', {
+        false: false,
+      }),
+    }),
+    iconPosition: figma.boolean('Icon right?', {
+      false: figma.boolean('Icon left?', {
+        true: 'left',
       }),
-      showIcon: figma.boolean("Icon right?"),
-      focusable: figma.enum("State", {
-        Focus: true,
+    }),
+    text: figma.string('Text'),
+    icon: figma.boolean('Icon right?', {
+      true: figma.instance('Icon right-20'),
+      false: figma.boolean('Icon left?', {
+        true: figma.instance('Icon left-20'),
       }),
-      // No matching props could be found for these Figma properties:
-      // "iconLeft": figma.boolean('Icon left?'),
-      // "iconRight": figma.boolean('Icon right?'),
-      // "iconRight20": figma.instance('Icon right-20'),
-      // "iconLeft20": figma.instance('Icon left-20'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <Link
-        inverted={props.inverted}
-        disabled={props.disabled}
-        showIcon={props.showIcon}
-        focusable={props.focusable}
-      />
-    ),
+    }),
   },
-)
+  example: props => (
+    <Link
+      icon={props.icon}
+      showIcon={props.showIcon}
+      iconPosition={props.iconPosition}
+      inverted={props.inverted}
+    >
+      {props.text}
+    </Link>
+  ),
+});

package/src/components/List/List.context.ts

@@ -5,6 +5,8 @@ export const ListContext = createContext<{
   loading?: ListProps['loading'];
   disabled?: ListProps['disabled'];
   container?: ListProps['container'];
+  firstItemId?: string;
+  registerItem?: (id: string) => () => void;
 }>({});
 
 export const useListContext = () => {
@@ -12,7 +14,3 @@ export const useListContext = () => {
 
   return context;
 };
-
-export const ListFirstItemContext = createContext<boolean>(false);
-
-export const useListFirstItemContext = () => useContext(ListFirstItemContext);

package/src/components/List/List.docs.mdx

@@ -100,6 +100,7 @@ const MyComponent = () => (
 | heading               | `string`                                                                                          |          | The text to display in the heading of the list.              |
 | helperText            | `string`                                                                                          |          | The supporting text to display in the heading of the list.   |
 | headerTrailingContent | `ReactNode`                                                                                       |          | Optional content to display on the right side of the header. |
+| invalidText           | `string`                                                                                          |          | Validation error text to display in the heading of the list. |
 | loading               | `boolean`                                                                                         | `false`  | Whether to show the list items in loading state.             |
 | disabled              | `boolean`                                                                                         | `false`  | Whether to disable the list.                                 |
 
@@ -121,13 +122,17 @@ const MyComponent = () => (
 | truncateHeading    | `boolean`                | `false`  | Whether to truncate the heading text if it overflows.           |
 | truncateHelperText | `boolean`                | `false`  | Whether to truncate the helper text if it overflows.            |
 
+First-item styling is applied to the first rendered `ListItem` or `ListAction`. Wrapper components that render `null`
+are ignored, so conditional list items will not affect which item loses the top border.
+
 ### `ListAction`
 
-| Name     | Type         | Default | Description                                  |
-| -------- | ------------ | ------- | -------------------------------------------- |
-| heading  | `string`     |         | The text to display in the list action item. |
-| onPress  | `() => void` |         | A callback function to be called             |
-| disabled | `boolean`    | `false` | Whether to disable the list action item.     |
+| Name     | Type         | Default | Description                                                            |
+| -------- | ------------ | ------- | ---------------------------------------------------------------------- |
+| heading  | `string`     |         | The text to display in the list action item.                           |
+| onPress  | `() => void` |         | A callback function to be called when the list action item is pressed. |
+| disabled | `boolean`    | `false` | Whether to disable the list action item.                               |
+| loading  | `boolean`    | `false` | Whether to show the list action in loading state.                      |
 
 #### - `ListItemLeadingContent`
 

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';
 }