@utilitywarehouse/hearth-react-native 0.11.0 → 0.12.0

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -4,6 +4,7 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Link } from '../Link';
 import HighlightBanner from './HighlightBanner';
+import HighlightBannerImage from './HighlightBannerImage';
 
 const meta = {
   title: 'Stories / HighlightBanner',
@@ -49,11 +50,13 @@ const meta = {
     heading: 'Featured Content',
     headingColor: 'highlight',
     description: 'This is a description of the featured content that appears below the image.',
-    image: {
-      source: {
-        uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-      },
-    },
+    image: (
+      <HighlightBannerImage
+        source={{
+          uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+        }}
+      />
+    ),
   },
 } satisfies Meta<typeof HighlightBanner>;
 
@@ -105,11 +108,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Energy Blue"
             headingColor="energy"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with energy blue heading"
             link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
           />
@@ -117,22 +122,26 @@ export const ColorVariants: Story = {
             {...args}
             heading="Broadband Green"
             headingColor="broadband"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with broadband green heading"
           />
           <HighlightBanner
             {...args}
             heading="Insurance Orange"
             headingColor="insurance"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with insurance orange heading"
             button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
           />
@@ -140,11 +149,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Cashback Lilac"
             headingColor="cashback"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with cashback lilac heading"
             button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
           />
@@ -152,11 +163,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Pig Pink"
             headingColor="pig"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with pig pink heading"
             link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
           />
@@ -164,22 +177,26 @@ export const ColorVariants: Story = {
             {...args}
             heading="Mobile Rose"
             headingColor="mobile"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with mobile rose heading"
           />
           <HighlightBanner
             {...args}
             heading="Highlight Yellow"
             headingColor="highlight"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with highlight yellow heading"
           />
         </Flex>
@@ -226,11 +243,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Nature Landscape"
             headingColor="broadband"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
+                }}
+              />
+            }
             description="Beautiful mountain landscape with clear blue sky"
             link={<Link onPress={() => console.log('pressed')}>View gallery</Link>}
           />
@@ -240,11 +259,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Urban Architecture"
             headingColor="highlight"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
+                }}
+              />
+            }
             description="Modern city buildings and urban design"
             button={<Button onPress={() => console.log('pressed')}>Explore Cities</Button>}
           />
@@ -254,11 +275,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Ocean Waves"
             headingColor="energy"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
+                }}
+              />
+            }
             description="Stunning ocean views and coastal beauty"
           />
         </View>
@@ -275,11 +298,13 @@ export const LongContent: Story = {
           {...args}
           heading="Extended Information Card"
           headingColor="energy"
-          image={{
-            source: {
-              uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80',
-            },
-          }}
+          image={
+            <HighlightBannerImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80',
+              }}
+            />
+          }
           description="This is a much longer description that demonstrates how the component handles extended text content. It includes multiple sentences and provides more detailed information about the featured content, ensuring the layout remains clean and readable even with more text."
           button={<Button onPress={() => console.log('pressed')}>Read Full Article</Button>}
         />

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -1,4 +1,4 @@
-import { Image, View } from 'react-native';
+import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
@@ -26,11 +26,7 @@ const HighlightBanner = ({
             {heading}
           </BodyText>
         </View>
-        {!!image && (
-          <View style={styles.imageContainer(imageContainerHeight)}>
-            <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
-          </View>
-        )}
+        {!!image && <View style={styles.imageContainer(imageContainerHeight)}>{image}</View>}
         <View style={styles.footer}>
           <BodyText size="md" textAlign="center">
             {description}
@@ -99,10 +95,7 @@ const styles = StyleSheet.create(theme => ({
     width: '100%',
     height,
   }),
-  image: {
-    width: '100%',
-    height: '100%',
-  },
+
   footer: {
     padding: theme.components.banner.highlight.padding,
     gap: theme.components.banner.highlight.content.gap,

package/src/components/HighlightBanner/HighlightBannerImage.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 HighlightBannerImage = (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: '100%',
+    height: '100%',
+  },
+});
+
+export default HighlightBannerImage;

package/src/components/HighlightBanner/index.ts

@@ -1,2 +1,3 @@
 export { default as HighlightBanner } from './HighlightBanner';
 export type { default as HighlightBannerProps } from './HighlightBanner.props';
+export { default as HighlightBannerImage } from './HighlightBannerImage';

package/src/components/Input/Input.stories.tsx

@@ -1,10 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+import { useRef, useState } from 'react';
+import { NativeSyntheticEvent, TextInput, TextInputChangeEventData, View } from 'react-native';
 import { Input } from '.';
 import { VariantTitle } from '../../../docs/components';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { Button } from '../Button';
 import { Flex } from '../Flex';
 
 const meta = {
@@ -73,6 +76,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
+  // @ts-expect-error - This is a playground
   render: ({ leadingIcon: leading, trailingIcon: trailing, ...args }) => {
     // @ts-expect-error - This is a playground
     const leadingIcon = leading === 'none' ? undefined : Icons[leading];
@@ -152,3 +156,72 @@ export const Variants: Story = {
     );
   },
 };
+
+export const RefTest: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const inputRef = useRef<TextInput>(null);
+    const [refStatus, setRefStatus] = useState('Ref not tested yet');
+    const theme = useTheme();
+
+    const handleFocus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        setRefStatus('✅ Ref works! Input focused programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    const handleBlur = () => {
+      if (inputRef.current) {
+        inputRef.current.blur();
+        setRefStatus('✅ Ref works! Input blurred programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    const handleClear = () => {
+      if (inputRef.current) {
+        inputRef.current.clear();
+        setRefStatus('✅ Ref works! Input cleared programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    return (
+      <Flex direction="column" space="lg">
+        <VariantTitle title="Ref Test">
+          <Input
+            ref={inputRef}
+            placeholder="Test ref functionality"
+            defaultValue="Try the buttons below"
+          />
+        </VariantTitle>
+        <VariantTitle title="Status">
+          <Flex direction="column" space="sm">
+            <Flex direction="row" space="sm">
+              <Button onPress={handleFocus}>Focus Input</Button>
+              <Button onPress={handleBlur}>Blur Input</Button>
+              <Button onPress={handleClear}>Clear Input</Button>
+            </Flex>
+            <View
+              style={{
+                marginTop: 8,
+                padding: 8,
+                backgroundColor: theme.color.background.secondary,
+                borderRadius: 4,
+              }}
+            >
+              <BodyText>{refStatus}</BodyText>
+            </View>
+          </Flex>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};

package/src/components/Input/Input.tsx

@@ -1,5 +1,6 @@
 import { createInput } from '@gluestack-ui/input';
-import { ComponentType, useState } from 'react';
+import { ComponentType, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput } from 'react-native';
 import type InputProps from './Input.props';
 
 import {
@@ -29,108 +30,119 @@ export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
 
-const Input = ({
-  validationStatus = 'initial',
-  children,
-  disabled,
-  focused,
-  readonly,
-  leadingIcon,
-  trailingIcon,
-  type,
-  showPasswordToggle = true,
-  onClear,
-  format,
-  loading,
-  clearable = false,
-  required,
-  inBottomSheet = false,
-  ...props
-}: InputProps) => {
-  const formFieldContext = useFormFieldContext();
-  const { disabled: formFieldDisabled } = formFieldContext;
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-  const isRequired = formFieldContext?.required ?? required;
-  const [fieldType, setFieldType] = useState<'password' | 'text'>(
-    type === 'password' ? 'password' : 'text'
-  );
-  const { color } = useTheme();
+const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      validationStatus = 'initial',
+      children,
+      disabled,
+      focused,
+      readonly,
+      leadingIcon,
+      trailingIcon,
+      type,
+      showPasswordToggle = true,
+      onClear,
+      format,
+      loading,
+      clearable = false,
+      required,
+      inBottomSheet = false,
+      ...props
+    },
+    ref
+  ) => {
+    const formFieldContext = useFormFieldContext();
+    const { disabled: formFieldDisabled } = formFieldContext;
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isRequired = formFieldContext?.required ?? required;
+    const [fieldType, setFieldType] = useState<'password' | 'text'>(
+      type === 'password' ? 'password' : 'text'
+    );
+    const { color } = useTheme();
+    const inputRef = useRef<TextInput>(null);
 
-  const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
-  const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
+    // Expose TextInput methods to parent components
+    useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
-  const toggleFieldType = () => {
-    setFieldType(fieldType === 'password' ? 'text' : 'password');
-  };
+    const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
+    const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
 
-  const leadingIconComponent = ((): ComponentType | undefined => {
-    if (type === 'search') {
-      return SearchMediumIcon;
-    }
-    return leadingIcon;
-  })();
+    const toggleFieldType = () => {
+      setFieldType(fieldType === 'password' ? 'text' : 'password');
+    };
 
-  const getInputMode = (() => {
-    if (type === 'search') {
-      return 'search';
-    }
-    return undefined;
-  })();
+    const leadingIconComponent = ((): ComponentType | undefined => {
+      if (type === 'search') {
+        return SearchMediumIcon;
+      }
+      return leadingIcon;
+    })();
 
-  return (
-    <InputComponent
-      {...(children ? props : {})}
-      validationStatus={validationStatusFromContext}
-      isInvalid={validationStatusFromContext === 'invalid'}
-      isReadOnly={readonly}
-      isDisabled={formFieldDisabled ?? disabled}
-      isFocused={focused}
-      type={type as undefined}
-      isRequired={isRequired}
-    >
-      {children ? (
-        <>{children}</>
-      ) : (
-        <>
-          {!!leadingIconComponent && (
-            <InputSlot>
-              <InputIcon as={leadingIconComponent} />
-            </InputSlot>
-          )}
-          <InputField
-            type={fieldType}
-            inputMode={getInputMode}
-            inBottomSheet={inBottomSheet}
-            {...props}
-          />
-          {shouldShowClear && (
-            <InputSlot>
-              <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
-            </InputSlot>
-          )}
-          {loading && (
-            <InputSlot>
-              <Spinner size="xs" color={color.icon.primary} />
-            </InputSlot>
-          )}
-          {shouldShowPasswordToggle && (
-            <InputSlot>
-              <UnstyledIconButton
-                onPress={toggleFieldType}
-                icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
-              />
-            </InputSlot>
-          )}
-          {!!trailingIcon && (
-            <InputSlot>
-              <InputIcon as={trailingIcon} />
-            </InputSlot>
-          )}
-        </>
-      )}
-    </InputComponent>
-  );
-};
+    const getInputMode = (() => {
+      if (type === 'search') {
+        return 'search';
+      }
+      return undefined;
+    })();
+
+    return (
+      <InputComponent
+        {...(children ? props : {})}
+        validationStatus={validationStatusFromContext}
+        isInvalid={validationStatusFromContext === 'invalid'}
+        isReadOnly={readonly}
+        isDisabled={formFieldDisabled ?? disabled}
+        isFocused={focused}
+        type={type as undefined}
+        isRequired={isRequired}
+      >
+        {children ? (
+          <>{children}</>
+        ) : (
+          <>
+            {!!leadingIconComponent && (
+              <InputSlot>
+                <InputIcon as={leadingIconComponent} />
+              </InputSlot>
+            )}
+            <InputField
+              // @ts-expect-error - ref forwarding issue
+              ref={inputRef}
+              type={fieldType}
+              inputMode={getInputMode}
+              inBottomSheet={inBottomSheet}
+              {...props}
+            />
+            {shouldShowClear && (
+              <InputSlot>
+                <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
+              </InputSlot>
+            )}
+            {loading && (
+              <InputSlot>
+                <Spinner size="xs" color={color.icon.primary} />
+              </InputSlot>
+            )}
+            {shouldShowPasswordToggle && (
+              <InputSlot>
+                <UnstyledIconButton
+                  onPress={toggleFieldType}
+                  icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
+                />
+              </InputSlot>
+            )}
+            {!!trailingIcon && (
+              <InputSlot>
+                <InputIcon as={trailingIcon} />
+              </InputSlot>
+            )}
+          </>
+        )}
+      </InputComponent>
+    );
+  }
+);
 
 Input.displayName = 'Input';