@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

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

@@ -0,0 +1,259 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { View } from 'react-native';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
+import { Link } from '../Link';
+import HighlightBanner from './HighlightBanner';
+
+const meta = {
+  title: 'Stories / HighlightBanner',
+  component: HighlightBanner,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'The heading text displayed at the top of the card',
+    },
+    headingColor: {
+      control: 'select',
+      description: 'The background color for the heading section',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+    },
+    description: {
+      control: 'text',
+      description: 'The description text displayed in the footer',
+    },
+    variant: {
+      control: 'select',
+      description: 'The variant style of the HighlightBanner',
+      options: ['emphasis', 'subtle'],
+    },
+  },
+  args: {
+    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',
+      },
+    },
+  },
+} satisfies Meta<typeof HighlightBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner {...args} />
+      </View>
+    );
+  },
+};
+
+export const WithButton: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          button={<Button onPress={() => console.log('Button pressed')}>Learn More</Button>}
+        />
+      </View>
+    );
+  },
+};
+
+export const WithLink: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          link={<Link onPress={() => console.log('Link pressed')}>View details</Link>}
+        />
+      </View>
+    );
+  },
+};
+
+export const ColorVariants: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column" align="stretch">
+          <HighlightBanner
+            {...args}
+            heading="Energy Blue"
+            headingColor="energy"
+            image={{
+              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>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Broadband Green"
+            headingColor="broadband"
+            image={{
+              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',
+              },
+            }}
+            description="Featured content with insurance orange heading"
+            button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Cashback Lilac"
+            headingColor="cashback"
+            image={{
+              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>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Pig Pink"
+            headingColor="pig"
+            image={{
+              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>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Mobile Rose"
+            headingColor="mobile"
+            image={{
+              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',
+              },
+            }}
+            description="Featured content with highlight yellow heading"
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const SubtleCard: Story = {
+  args: {
+    variant: 'subtle',
+  },
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner {...args} />
+      </View>
+    );
+  },
+};
+
+export const DifferentImages: Story = {
+  render: args => {
+    return (
+      <Flex space="lg" direction="column">
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Nature Landscape"
+            headingColor="broadband"
+            image={{
+              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>}
+          />
+        </View>
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Urban Architecture"
+            headingColor="highlight"
+            image={{
+              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>}
+          />
+        </View>
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Ocean Waves"
+            headingColor="energy"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
+              },
+            }}
+            description="Stunning ocean views and coastal beauty"
+          />
+        </View>
+      </Flex>
+    );
+  },
+};
+
+export const LongContent: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          heading="Extended Information Card"
+          headingColor="energy"
+          image={{
+            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>}
+        />
+      </View>
+    );
+  },
+};

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -0,0 +1,122 @@
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+import type HighlightBannerProps from './HighlightBanner.props';
+
+const HighlightBanner = ({
+  heading,
+  headingColor,
+  image,
+  imageContainerHeight,
+  description,
+  link,
+  button,
+  variant = 'emphasis',
+  style,
+  ...props
+}: HighlightBannerProps) => {
+  styles.useVariants({ headingColor, variant });
+
+  return (
+    <Card variant={variant} noPadding style={style} {...props}>
+      <View style={[styles.container]}>
+        <View style={[styles.header]}>
+          <BodyText size="md" textAlign="center" weight="semibold">
+            {heading}
+          </BodyText>
+        </View>
+        <View style={styles.imageContainer(imageContainerHeight)}>
+          <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
+        </View>
+        <View style={styles.footer}>
+          <BodyText size="md" textAlign="center">
+            {description}
+          </BodyText>
+          {link && <View style={styles.linkContainer}>{link}</View>}
+          {button && <View style={styles.buttonContainer}>{button}</View>}
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+HighlightBanner.displayName = 'HighlightBanner';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+    width: '100%',
+  },
+  header: {
+    padding: theme.components.banner.highlight.padding,
+    alignItems: 'center',
+    justifyContent: 'center',
+    variants: {
+      headingColor: {
+        highlight: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+        },
+        pig: {
+          backgroundColor: theme.color.surface.pig.subtle,
+        },
+        energy: {
+          backgroundColor: theme.color.surface.energy.subtle,
+        },
+        broadband: {
+          backgroundColor: theme.color.surface.broadband.subtle,
+        },
+        mobile: {
+          backgroundColor: theme.color.surface.mobile.subtle,
+        },
+        insurance: {
+          backgroundColor: theme.color.surface.insurance.subtle,
+        },
+        cashback: {
+          backgroundColor: theme.color.surface.cashback.subtle,
+        },
+      },
+      variant: {
+        emphasis: {
+          borderColor: theme.color.border.strong,
+          borderBottomWidth: theme.borderWidth[2],
+        },
+        subtle: {
+          borderColor: theme.color.border.subtle,
+        },
+      },
+    },
+  },
+  imageContainer: (height: number = 200) => ({
+    width: '100%',
+    height,
+  }),
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  footer: {
+    padding: theme.components.banner.highlight.padding,
+    gap: theme.components.banner.highlight.content.gap,
+    variants: {
+      variant: {
+        emphasis: {
+          borderColor: theme.color.border.strong,
+          borderTopWidth: theme.borderWidth[2],
+        },
+        subtle: {
+          borderColor: theme.color.border.subtle,
+        },
+      },
+    },
+  },
+  linkContainer: {
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    alignItems: 'stretch',
+  },
+}));
+
+export default HighlightBanner;

package/src/components/HighlightBanner/index.ts

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

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,5 @@
 import { createIcon } from '@gluestack-ui/icon';
+import type React from 'react';
 import { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { withUnistyles } from 'react-native-unistyles';
@@ -44,8 +45,8 @@ const PrimitiveIcon = withUnistyles(
 
 PrimitiveIcon.displayName = 'PrimitiveIcon';
 
-export const Icon = createIcon({
-  Root: PrimitiveIcon,
-});
+export const Icon: React.ForwardRefExoticComponent<IconProps> = createIcon({
+  Root: PrimitiveIcon as any,
+}) as React.ForwardRefExoticComponent<IconProps>;
 
 export default Icon;

package/src/components/IconButton/IconButtonIcon.tsx

@@ -18,7 +18,8 @@ const IconButtonIcon = (props: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }
     >

package/src/components/IconContainer/IconContainer.tsx

@@ -1,27 +1,25 @@
 import { View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import type IconContainerProps from './IconContainer.props';
 
-const IconContainer = withUnistyles(
-  ({
-    icon: IconComp,
-    size = 'md',
-    radiusNone = false,
-    variant = 'subtle',
-    color = 'pig',
-    style,
-    ...props
-  }: IconContainerProps) => {
-    styles.useVariants({ size, radiusNone, variant, color });
+const IconContainer = ({
+  icon: IconComp,
+  size = 'md',
+  radiusNone = false,
+  variant = 'subtle',
+  color = 'pig',
+  style,
+  ...props
+}: IconContainerProps) => {
+  styles.useVariants({ size, radiusNone, variant, color });
 
-    return (
-      <View style={[styles.container, style]} {...props}>
-        {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
-      </View>
-    );
-  }
-);
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
+    </View>
+  );
+};
 
 IconContainer.displayName = 'IconContainer';
 

package/src/components/Input/InputField.tsx

@@ -15,6 +15,7 @@ const InputField = ({
 
   if (inBottomSheet) {
     return (
+      // @ts-expect-error - BottomSheetTextInput type issue
       <BottomSheetTextInput
         placeholderTextColor={color.text.secondary}
         selectionColor={color.purple[700]}
@@ -52,7 +53,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     variants: {
       focused: {

package/src/components/Input/InputIcon.tsx

@@ -9,7 +9,8 @@ const InputIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) =
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

package/src/components/Link/LinkIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useLinkContext } from './Link.context';
 
 const LinkIcon = ({ children, ...props }: IconProps) => {
   const { active, inverted, disabled } = useLinkContext();
@@ -13,7 +13,8 @@ const LinkIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

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

@@ -10,7 +10,8 @@ const ListActionTrailingIcon = ({ children, ...props }: IconProps & { as?: Compo
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

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

@@ -9,7 +9,8 @@ const ListItemIcon = ({ children, ...props }: IconProps & { as?: ComponentType }
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

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

@@ -10,7 +10,8 @@ const ListItemTrailingIcon = ({ children, ...props }: IconProps & { as?: Compone
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >
@@ -24,8 +25,6 @@ ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 const styles = StyleSheet.create(theme => ({
   icon: {
     color: theme.color.icon.primary,
-    width: 24,
-    height: 24,
   },
 }));
 

package/src/components/Radio/RadioIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,12 @@ const RadioIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? {
+              // @ts-expect-error - style prop type issue
+              ...(styles.container as StyleProp<ViewStyle>),
+              // @ts-expect-error - style prop type issue
+              ...(props.style as StyleProp<ViewStyle>),
+            }
           : ([styles.container, style] as any)
       }
     />

package/src/components/RadioCard/RadioCardIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioCardIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,8 @@ const RadioCardIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.container as StyleProp<ViewStyle>), ...props.style }
           : ([styles.container, style] as any)
       }
     />

package/src/components/Switch/Switch.tsx

@@ -11,6 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
@@ -23,6 +24,7 @@ const CustomSwitch = ({
   ...accessibilityProps
 }: SwitchProps) => {
   const { components, color } = useTheme();
+  const theme = useAnimatedTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =
     size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
@@ -34,17 +36,20 @@ const CustomSwitch = ({
   const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
   const progress = useSharedValue(value ? 1 : 0);
 
-  const animatedThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: offset.value }],
-  }));
+  const animatedThumbStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: offset.value }],
+    }),
+    [offset]
+  );
 
   const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
       [
-        color.interactive.functional.surface.strong.default,
-        color.interactive.brand.surface.strong.default,
+        theme.value.color.interactive.functional.surface.strong.default,
+        theme.value.color.interactive.brand.surface.strong.default,
       ]
     );
     return { backgroundColor };

package/src/components/Switch/Switch.web.tsx

@@ -122,6 +122,7 @@ const CustomSwitch = ({
               return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
             })()}
           </AnimatedView>
+
           <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
             {(() => {
               const IconAny = Icon as any;

package/src/components/Textarea/TextareaField.tsx

@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     outlineWidth: 0,
     _web: {

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -19,7 +19,8 @@ const ButtonIcon = ({
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-ignore
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >