@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

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

@@ -1,314 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { View } from 'react-native';
-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',
-  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'],
-    },
-    shadowColor: {
-      control: 'select',
-      description: 'The shadow color of the card',
-      options: [
-        'functional',
-        'brand',
-        'energy',
-        'broadband',
-        'mobile',
-        'insurance',
-        'cashback',
-        'pig',
-      ],
-    },
-  },
-  args: {
-    heading: 'Featured Content',
-    headingColor: 'highlight',
-    description: 'This is a description of the featured content that appears below the image.',
-    image: (
-      <HighlightBannerImage
-        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 spacing="lg" direction="column" align="stretch">
-          <HighlightBanner
-            {...args}
-            heading="Energy Blue"
-            headingColor="energy"
-            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>}
-          />
-          <HighlightBanner
-            {...args}
-            heading="Broadband Green"
-            headingColor="broadband"
-            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={
-              <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>}
-          />
-          <HighlightBanner
-            {...args}
-            heading="Cashback Lilac"
-            headingColor="cashback"
-            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>}
-          />
-          <HighlightBanner
-            {...args}
-            heading="Pig Pink"
-            headingColor="pig"
-            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>}
-          />
-          <HighlightBanner
-            {...args}
-            heading="Mobile Rose"
-            headingColor="mobile"
-            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={
-              <HighlightBannerImage
-                source={{
-                  uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
-                }}
-              />
-            }
-            description="Featured content with highlight yellow heading"
-          />
-        </Flex>
-      </View>
-    );
-  },
-};
-
-export const WithoutImage: Story = {
-  render: args => {
-    return (
-      <View style={{ width: 400 }}>
-        <HighlightBanner
-          {...args}
-          image={undefined}
-          heading="Content Without Image"
-          description="This HighlightBanner does not have an image, focusing solely on the text content."
-          button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
-        />
-      </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 spacing="lg" direction="column">
-        <View style={{ width: 400 }}>
-          <HighlightBanner
-            {...args}
-            heading="Nature Landscape"
-            headingColor="broadband"
-            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>}
-          />
-        </View>
-        <View style={{ width: 400 }}>
-          <HighlightBanner
-            {...args}
-            heading="Urban Architecture"
-            headingColor="highlight"
-            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>}
-          />
-        </View>
-        <View style={{ width: 400 }}>
-          <HighlightBanner
-            {...args}
-            heading="Ocean Waves"
-            headingColor="energy"
-            image={
-              <HighlightBannerImage
-                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={
-            <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>}
-        />
-      </View>
-    );
-  },
-};

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -1,127 +0,0 @@
-import { 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, hasImage: Boolean(image) });
-
-  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>
-        {!!image && <View style={styles.imageContainer(imageContainerHeight)}>{image}</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,
-        },
-      },
-      hasImage: {
-        false: {
-          borderBottomWidth: 0,
-        },
-      },
-    },
-  },
-  imageContainer: (height: number = 200) => ({
-    width: '100%',
-    height,
-  }),
-
-  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,
-        },
-      },
-      hasImage: {
-        true: {
-          flex: 1,
-        },
-      },
-    },
-  },
-  linkContainer: {
-    alignItems: 'center',
-  },
-  buttonContainer: {
-    alignItems: 'stretch',
-  },
-}));
-
-export default HighlightBanner;

package/src/components/HighlightBanner/HighlightBannerImage.tsx

@@ -1,20 +0,0 @@
-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,3 +0,0 @@
-export { default as HighlightBanner } from './HighlightBanner';
-export type { default as HighlightBannerProps } from './HighlightBanner.props';
-export { default as HighlightBannerImage } from './HighlightBannerImage';

package/src/components/Icon/Icon.props.ts

@@ -1,17 +0,0 @@
-import type { ColorValue as RNColorValue } from 'react-native';
-import type { SvgProps } from 'react-native-svg';
-import type { ColorValue } from '../../types';
-import { ComponentType } from 'react';
-
-interface IconProps extends SvgProps {
-  height?: number | string;
-  width?: number | string;
-  fill?: string;
-  color?: ColorValue;
-  size?: number | string;
-  stroke?: string;
-  as?: ComponentType;
-  style?: SvgProps['style'] & { color?: RNColorValue };
-}
-
-export default IconProps;

package/src/components/Icon/Icon.stories.tsx

@@ -1,44 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { Icon } from '.';
-import { ColorValue } from '../../types';
-import { coloursAsArray } from '../../utils';
-
-const meta = {
-  title: 'Stories / Icon',
-  component: Icon,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: [...Object.keys(Icons)],
-      description: 'The Icon that should render as the component',
-      defaultValue: 'Helper text icon',
-    },
-    color: {
-      options: coloursAsArray(),
-      control: 'select',
-      description: 'Background color of the Icon. Use the color name from the theme.',
-    },
-  },
-  args: {
-    // @ts-expect-error - This is a playground
-    as: Object.keys(Icons)[0],
-    color: 'grey1000' as ColorValue,
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  // @ts-expect-error - This is a playground
-  render: ({ as: icon, color }) => {
-    // @ts-expect-error - This is a playground
-    const as = icon === 'none' ? undefined : Icons[icon];
-    return <Icon as={as} color={color} />;
-  },
-};

package/src/components/Icon/Icon.tsx

@@ -1,52 +0,0 @@
-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';
-import { useTheme } from '../../hooks';
-import type { ColorValue } from '../../types';
-import { getFlattenedColorValue } from '../../utils';
-import type IconProps from './Icon.props';
-
-const PrimitiveIcon = withUnistyles(
-  ({ height, width, fill, color, size, stroke, as: AsComp, ...props }: IconProps) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const { color: themeColor, colorMode } = useTheme();
-    const colorValue: ColorValue = useMemo(
-      () => getFlattenedColorValue(color, themeColor),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [color, colorMode]
-    );
-
-    let colorProps = {};
-    if (color) {
-      colorProps = { ...colorProps, color: colorValue };
-    }
-    if (stroke) {
-      colorProps = { ...colorProps, stroke };
-    }
-    if (fill) {
-      colorProps = { ...colorProps, fill: fill };
-    }
-    if (AsComp) {
-      const Component = AsComp;
-      return <Component {...sizeProps} {...colorProps} strokeWidth={0} {...props} />;
-    }
-    return <Svg height={height} width={width} strokeWidth={0} {...colorProps} {...props} />;
-  }
-);
-
-PrimitiveIcon.displayName = 'PrimitiveIcon';
-
-export const Icon: React.ForwardRefExoticComponent<IconProps> = createIcon({
-  Root: PrimitiveIcon as any,
-}) as React.ForwardRefExoticComponent<IconProps>;
-
-export default Icon;

package/src/components/Icon/index.tsx

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

package/src/components/IconButton/IconButton.context.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { IconButtonProps } from './IconButton.props';
-
-export const IconButtonContext = createContext<{
-  colorScheme?: IconButtonProps['colorScheme'];
-  variant?: IconButtonProps['variant'];
-  size?: IconButtonProps['size'];
-  inverted?: IconButtonProps['inverted'];
-  disabled?: IconButtonProps['disabled'];
-  active?: boolean;
-}>({});
-
-export const useIconButtonContext = () => useContext(IconButtonContext);

package/src/components/IconButton/IconButton.figma.tsx

@@ -1,45 +0,0 @@
-import figma from '@figma/code-connect';
-import { IconButton } from '../';
-
-figma.connect(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A1455', {
-  props: {
-    disabled: figma.enum('State', {
-      Disabled: true,
-    }),
-    size: figma.enum('Size', {
-      'SM-32': 'sm',
-      'MD-48': 'md',
-    }),
-    colorScheme: figma.enum('Color Scheme', {
-      Affirmative: 'affirmative',
-      Destructive: 'destructive',
-      Functional: 'functional',
-      Highlight: 'highlight',
-    }),
-    loading: figma.enum('State', {
-      Loading: true,
-    }),
-    icon: figma.enum('Size', {
-      'SM-32': figma.instance('Icon-20'),
-      'MD-48': figma.instance('Icon-24'),
-    }),
-    variant: figma.enum('Variant', {
-      Emphasis: 'emphasis',
-      Solid: 'solid',
-      Outline: 'outline',
-      Ghost: 'ghost',
-    }),
-    inverted: figma.boolean('Inverted?'),
-  },
-  example: props => (
-    <IconButton
-      disabled={props.disabled}
-      size={props.size}
-      variant={props.variant}
-      inverted={props.inverted}
-      colorScheme={props.colorScheme}
-      loading={props.loading}
-      icon={props.icon}
-    />
-  ),
-});

package/src/components/IconButton/IconButton.props.ts

@@ -1,45 +0,0 @@
-import type { ComponentType } from 'react';
-import type { PressableProps } from 'react-native';
-import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
-import { ColorValue } from '../../types';
-import { ButtonVariants } from '../Button/Button.props';
-
-export type IconButtonProps = {
-  /*
-   * If `true`, the button will be disabled.
-   * @default  false
-   */
-  disabled?: boolean;
-  size?: 'sm' | 'md';
-  pressed?: boolean;
-  /*
-   * The icon to display on the button.
-   * @default undefined
-   */
-  icon: ComponentType;
-  /*
-   * If `true`, the button will show a spinner.
-   * @default  false
-   */
-  loading?: boolean;
-  children?: ViewProps['children'];
-  /**
-   * Custom background color override.
-   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
-   * @default undefined
-   */
-  backgroundColor?: ColorValue;
-  /**
-   * Custom active/pressed background color override.
-   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
-   * @default undefined
-   */
-  activeBackgroundColor?: ColorValue;
-  /**
-   * Custom shadow color override.
-   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
-   * @default undefined
-   */
-  shadowColor?: ColorValue;
-} & Omit<PressableProps, 'children'> &
-  ButtonVariants;