@utilitywarehouse/hearth-react-native 0.11.0 → 0.12.0

package/src/components/Input/InputField.tsx

@@ -1,25 +1,38 @@
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { forwardRef } from 'react';
 import { TextInput as RNTextInput, TextInputProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
 
-const InputField = ({
-  style,
-  inBottomSheet = false,
-  ...props
-}: TextInputProps & { inBottomSheet?: boolean }) => {
-  const { disabled, focused = false, type } = useInputContext();
-  styles.useVariants({ focused, type });
-  const { color } = useTheme();
+const InputField = forwardRef<RNTextInput, TextInputProps & { inBottomSheet?: boolean }>(
+  ({ style, inBottomSheet = false, ...props }, ref) => {
+    const { disabled, focused = false, type } = useInputContext();
+    styles.useVariants({ focused, type });
+    const { color } = useTheme();
+
+    if (inBottomSheet) {
+      return (
+        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
+        <BottomSheetTextInput
+          ref={ref as any}
+          placeholderTextColor={color.text.secondary}
+          selectionColor={color.surface.brand.default}
+          cursorColor={color.surface.brand.default}
+          verticalAlign="middle"
+          aria-disabled={disabled}
+          {...props}
+          style={[styles.input, style]}
+        />
+      );
+    }
 
-  if (inBottomSheet) {
     return (
-      // @ts-expect-error - BottomSheetTextInput type issue
-      <BottomSheetTextInput
+      <RNTextInput
+        ref={ref}
         placeholderTextColor={color.text.secondary}
-        selectionColor={color.purple[700]}
-        cursorColor={color.purple[700]}
+        selectionColor={color.surface.brand.default}
+        cursorColor={color.surface.brand.default}
         verticalAlign="middle"
         aria-disabled={disabled}
         {...props}
@@ -27,19 +40,7 @@ const InputField = ({
       />
     );
   }
-
-  return (
-    <RNTextInput
-      placeholderTextColor={color.text.secondary}
-      selectionColor={color.purple[700]}
-      cursorColor={color.purple[700]}
-      verticalAlign="middle"
-      aria-disabled={disabled}
-      {...props}
-      style={[styles.input, style]}
-    />
-  );
-};
+);
 
 InputField.displayName = 'InputField';
 

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

@@ -4,18 +4,20 @@ import {
   ChevronRightSmallIcon,
   ElectricityMediumIcon,
   GasMediumIcon,
-  InfoMediumIcon as HomeMediumIcon,
-  // HomeMediumIcon,
+  HomeMediumIcon,
   PaymentMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import {
   Badge,
   BadgeText,
+  BodyText,
   Box,
   FlatList,
   Image,
+  Link,
   List,
+  ListAction,
   ListItem,
   ListItemContent,
   ListItemHelperText,
@@ -26,9 +28,6 @@ import {
   ListItemTrailingIcon,
   SectionHeader,
   Switch,
-  Link,
-  ListAction,
-  BodyText,
 } from '../../';
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
@@ -116,7 +115,7 @@ const MyComponent = () => (
 | variant         | `'subtle' \| 'emphasis'` |          | The variant style of the list item.                             |
 | disabled        | `boolean`                | `false`  | Whether to disable the list item.                               |
 | loading         | `boolean`                | `false`  | Whether to show the list item in loading state.                 |
-| badge           | `BadgeProps`             |          | Props to pass to the Badge component.                           |
+| badge           | `ReactNode`              |          | The badge component to display in the list item.                |
 | badgePosition   | `'top' \| 'bottom'`      | `bottom` | Position of the badge in the list item.                         |
 | numericValue    | `string \| number`       |          | A numeric value to display on the right side of the item.       |
 
@@ -197,7 +196,14 @@ parts like `ListItemLeadingContent`, `ListItemContent`, and `ListItemTrailingCon
 <Canvas of={Stories.WithBadge} />
 
 ```tsx
-import { List, ListItem, IconContainer, Flex, Box } from '@utilitywarehouse/hearth-react-native';
+import {
+  List,
+  ListItem,
+  IconContainer,
+  Flex,
+  Box,
+  Badge,
+} from '@utilitywarehouse/hearth-react-native';
 
 import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -211,7 +217,7 @@ const BadgeList = () => {
         leadingContent={
           <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Text' }}
+        badge={<Badge text="Text" />}
       />
       <ListItem
         heading="Gas"
@@ -220,7 +226,7 @@ const BadgeList = () => {
         leadingContent={
           <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Smart Meter' }}
+        badge={<Badge text="Smart Meter" />}
       />
     </List>
   );

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

@@ -126,7 +126,7 @@ export const WithBadge: Story = {
         leadingContent={
           <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Text' }}
+        badge={<Badge text="Text" />}
       />
       <ListItem
         heading="Gas"
@@ -135,7 +135,7 @@ export const WithBadge: Story = {
         leadingContent={
           <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Smart Meter' }}
+        badge={<Badge text="Smart Meter" />}
       />
     </List>
   ),

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

@@ -1,5 +1,5 @@
+import { ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 
 interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
   loading?: boolean;
@@ -26,7 +26,7 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
   leadingContent?: ViewProps['children'];
   trailingContent?: ViewProps['children'];
   numericValue?: string | number;
-  badge?: BadgeProps;
+  badge?: ReactNode;
   badgePosition?: 'top' | 'bottom';
 }
 

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

@@ -2,7 +2,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
 import { useListContext } from '../List.context';
@@ -106,10 +105,10 @@ const ListItemRoot = ({
               <ListItemLeadingContent>{leadingContent}</ListItemLeadingContent>
             ) : null}
             <ListItemContent>
-              {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+              {badgePosition === 'top' && badge ? badge : null}
               <ListItemText>{heading}</ListItemText>
               {helperText ? <ListItemHelperText>{helperText}</ListItemHelperText> : null}
-              {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+              {badgePosition === 'bottom' && badge ? badge : null}
             </ListItemContent>
             {!!numericValue && <DetailText size="lg">{numericValue}</DetailText>}
             {trailingContent ? (

package/src/components/Modal/Modal.docs.mdx

@@ -108,6 +108,19 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height                                                       | `false` |
 | `inNavModal`                  | `boolean`                                      | Renders the modal correctly when used inside a navigation modal                                               | `false` |
 
+### `ModalImage` Props
+
+The `ModalImage` component can be used to display an image within the Modal. It accepts the following props:
+
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 ## Features
 
 ### Automatic Layout Management
@@ -269,6 +282,8 @@ Use the `image` prop to display an image-centric modal with centered content:
 <Canvas of={Stories.WithImage} />
 
 ```tsx
+import { Modal, ModalImage, Button } from '@utilitywarehouse/hearth-react-native';
+
 const ImageModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -282,10 +297,7 @@ const ImageModal = () => {
         description="Thanks for joining our community"
         primaryButtonText="Get Started"
         secondaryButtonText="Maybe Later"
-        image={{
-          source: require('./path/to/image.png'),
-          resizeMode: 'contain',
-        }}
+        image={<ModalImage source={require('./path/to/image.png')} resizeMode="contain" />}
         onPressPrimaryButton={() => modalRef.current?.dismiss()}
         onPressSecondaryButton={() => modalRef.current?.dismiss()}
       />

package/src/components/Modal/Modal.props.ts

@@ -1,11 +1,12 @@
-import { ImageProps, ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
 interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   loading?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
   description?: string;

package/src/components/Modal/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef } from 'react';
 import { ImageSourcePropType, Platform, View } from 'react-native';
-import { Modal } from '.';
+import { Modal, ModalImage } from '.';
 import pigs from '../../../docs/assets/pigs.png';
 import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -117,10 +117,7 @@ export const WithImage = () => {
           secondaryButtonText="Cancel"
           onPressSecondaryButton={closeModal}
           index={1}
-          image={{
-            source: pigs as ImageSourcePropType,
-            resizeMode: 'contain',
-          }}
+          image={<ModalImage source={pigs as ImageSourcePropType} resizeMode="contain" />}
         />
       </ViewWrap>
     </View>

package/src/components/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sh
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -200,7 +200,7 @@ const Modal = ({
           </View>
           {image ? (
             <View style={styles.imageContainer}>
-              <Image style={styles.image} {...image} />
+              {image}
               <View style={styles.textContent}>
                 {heading ? (
                   <Heading size="lg" textAlign="center" accessible>
@@ -296,10 +296,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
     gap: theme.components.modal.content.gap,
   },
-  image: {
-    width: 260,
-    height: 260,
-  },
   imageContainer: {
     alignItems: 'center',
     flex: 1,

package/src/components/Modal/Modal.web.tsx

@@ -2,7 +2,7 @@ import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sh
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -197,7 +197,7 @@ const Modal = ({
           </View>
           {image ? (
             <View style={styles.imageContainer}>
-              <Image style={styles.image} {...image} />
+              {image}
               <View style={styles.textContent}>
                 {heading ? (
                   <Heading size="lg" textAlign="center" accessible>
@@ -281,10 +281,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
     gap: theme.components.modal.content.gap,
   },
-  image: {
-    width: 260,
-    height: 260,
-  },
   imageContainer: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/Modal/ModalImage.tsx

@@ -0,0 +1,20 @@
+import { Image, ImageProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+
+const ModalImage = (props: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} style={[styles.image, props.style]} />;
+  }
+  return <Image resizeMode="cover" {...props} style={[styles.image, props.style]} />;
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: 260,
+    height: 260,
+  },
+});
+
+export default ModalImage;

package/src/components/Modal/index.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from './Modal';
 export type { default as ModalProps } from './Modal.props';
+export { default as ModalImage } from './ModalImage';

package/src/components/PillGroup/PillGroup.stories.tsx

@@ -142,7 +142,7 @@ export const Multiple: Story = {
     return (
       <Flex space="lg" direction="column" align="center" style={{ maxWidth: 400 }}>
         <PillGroup wrap={true} multiple value={selectedCategories} onChange={v => setSelectedCategories(v as string[])}>
-          <Pill value="all" label="All" />
+          <Pill value="unread" label="Unread" />
           <Pill value="new" label="New" icon={HeartMediumIcon} />
           <Pill value="favourites" label="My favourites" icon={HeartMediumIcon} />
           <Pill value="read" label="Read" />

package/src/components/Radio/Radio.docs.mdx

@@ -104,7 +104,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
-| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                         |
+| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -150,6 +150,15 @@ Contains all Group related layout style props and actions. It inherits all the p
 
 ### `RadioImage`
 
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 Contains all Image related layout style props and actions. It inherits all the properties of React Native's [Image component](https://reactnative.dev/docs/image).
 
 ## Variants
@@ -261,9 +270,9 @@ The `RadioImage` component is used to display an image next to the radio button.
 <Canvas of={Stories.WithImage} />
 
 ```tsx
-import { Radio, RadioGroup } from '@utilitywarehouse/native-ui';
+import { Radio, RadioGroup, RadioImage } from '@utilitywarehouse/native-ui';
 import visaLogo from './visa-logo.png';
-import mastarcardLogo from './mastercard-logo.png';
+import mastercardLogo from './mastercard-logo.png';
 
 const MyComponent = () => {
   const [value, setValue] = React.useState('Option 1');
@@ -273,16 +282,20 @@ const MyComponent = () => {
         value="visa"
         aria-label="Visa"
         label="Visa"
-        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        }
       />
       <Radio
         value="mastercard"
         aria-label="Mastercard"
         label="Mastercard"
-        image={{
-          source: mastarcardLogo,
-          style: { width: 40, height: 24, resizeMode: 'contain' },
-        }}
+        image={
+          <RadioImage
+            source={mastercardLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </RadioGroup>
   );

package/src/components/Radio/Radio.props.ts

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
   value: string;
@@ -28,7 +28,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
 }
 
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;

package/src/components/Radio/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { ImageSourcePropType } from 'react-native';
-import { Radio, RadioGroup } from '.';
+import { Radio, RadioGroup, RadioImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
@@ -106,11 +106,13 @@ export const WithImage: Story = {
         {...args}
         label="Visa"
         value="Option 1"
-        image={{
-          source: bankLogo1 as ImageSourcePropType,
-          style: { width: 48, height: 32 },
-          resizeMode: 'cover',
-        }}
+        image={
+          <RadioImage
+            source={bankLogo1 as ImageSourcePropType}
+            style={{ width: 48, height: 32 }}
+            resizeMode="cover"
+          />
+        }
       />
       <Radio
         aria-label="Label 2"
@@ -121,11 +123,13 @@ export const WithImage: Story = {
         {...args}
         label="Mastercard"
         value="Option 2"
-        image={{
-          source: bankLogo as ImageSourcePropType,
-          style: { width: 48, height: 32 },
-          resizeMode: 'cover',
-        }}
+        image={
+          <RadioImage
+            source={bankLogo as ImageSourcePropType}
+            style={{ width: 48, height: 32 }}
+            resizeMode="cover"
+          />
+        }
       />
     </RadioGroup>
   ),

package/src/components/Radio/Radio.tsx

@@ -9,7 +9,6 @@ import StyledRadio from './RadioRoot';
 import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
 import RadioTileRoot from './RadioTileRoot';
 
@@ -57,7 +56,7 @@ const Radio = ({
       <RadioIndicator>
         <RadioIcon />
       </RadioIndicator>
-      {image ? <RadioImage {...image} /> : null}
+      {image ? image : null}
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}

package/src/components/Radio/RadioImage.tsx

@@ -1,8 +1,13 @@
 import { Image, ImageProps } from 'react-native';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 
-const RadioImage = ({ source, style, ...props }: ImageProps) => (
-  <Image source={source} style={style} {...props} />
-);
+const RadioImage = ({ ...props }: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} />;
+  }
+  return <Image {...props} />;
+};
 
 RadioImage.displayName = 'RadioImage';
 

package/src/utils/index.ts

@@ -1,9 +1,10 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
 export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
+export { getInitials } from './getInitials';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
-export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
+export { default as isThemedImageProps } from './isThemedImageProps';
 export * from './styleUtils';
 export * from './themeValueHelpers';

package/src/utils/isThemedImageProps.ts

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