@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/Alert/AlertText.tsx

@@ -1,39 +0,0 @@
-import { TextProps, TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useAlertContext } from './Alert.context';
-
-const AlertText = ({ children, style, ...props }: TextProps & { semibold?: boolean }) => {
-  const { colorScheme } = useAlertContext();
-  styles.useVariants({ colorScheme });
-  return (
-    <BodyText size="md" style={[styles.text as TextStyle, style]} {...props}>
-      {children}
-    </BodyText>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    variants: {
-      colorScheme: {
-        info: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-        positive: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-        danger: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-        warning: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-    },
-  },
-}));
-
-AlertText.displayName = 'AlertText';
-
-export default AlertText;

package/src/components/Alert/AlertTitle.tsx

@@ -1,39 +0,0 @@
-import type { TextProps, TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useAlertContext } from './Alert.context';
-
-const AlertTitle = ({ children, style, ...props }: TextProps) => {
-  const { colorScheme } = useAlertContext();
-  styles.useVariants({ colorScheme });
-  return (
-    <BodyText size="md" weight="semibold" style={[styles.title as TextStyle, style]} {...props}>
-      {children}
-    </BodyText>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  title: {
-    variants: {
-      colorScheme: {
-        info: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-        positive: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-        danger: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-        warning: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-    },
-  },
-}));
-
-AlertTitle.displayName = 'AlertTitle';
-
-export default AlertTitle;

package/src/components/Alert/index.ts

@@ -1,8 +0,0 @@
-export { default as AlertLink } from './AlertLink';
-export { default as AlertTitle } from './AlertTitle';
-export { default as AlertIconButton } from './AlertIconButton';
-export { default as AlertCloseButton } from './AlertCloseButton';
-export { default as Alert } from './Alert';
-export { default as AlertText } from './AlertText';
-export { default as AlertIcon } from './AlertIcon';
-export { default as AlertContent } from './AlertContent';

package/src/components/Avatar/Avatar.figma.tsx

@@ -1,23 +0,0 @@
-import figma from '@figma/code-connect';
-import { Avatar } from '../';
-
-figma.connect(
-  Avatar,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6790-14313',
-  {
-    props: {
-      size: figma.enum('Size', {
-        'SM-32': 'sm',
-        'MD-48': 'md',
-      }),
-      initials: figma.string('Initials'),
-      image: figma.instance('Image'),
-      // "variant": figma.enum('Variant', {
-      //   "Image": "image",
-      //   "Initials": "initials",
-      //   "Icon": "icon"
-      // })
-    },
-    example: props => <Avatar size={props.size} name={props.initials} image={props.image} />,
-  }
-);

package/src/components/Avatar/Avatar.props.ts

@@ -1,31 +0,0 @@
-import type { ImageSourcePropType, ViewProps } from 'react-native';
-
-export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
-
-interface AvatarProps extends ViewProps {
-  /**
-   * The image source to display.
-   */
-  src?: ImageSourcePropType;
-  /**
-   * The name associated with the avatar, used for creating initials and accessibility label.
-   */
-  name?: string;
-  /**
-   * Sets the avatar size.
-   * @default md
-   */
-  size?: 'sm' | 'md';
-  /**
-   * Delay in milliseconds before the image is rendered.
-   * Useful to prevent flickering when the image loads very quickly.
-   * @default 0
-   */
-  delayMs?: number;
-  /**
-   * Callback fired when the loading status of the image changes.
-   */
-  onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
-}
-
-export default AvatarProps;

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,76 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-
-const meta = {
-  title: 'Stories / Avatar',
-  component: Avatar,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    size: {
-      options: ['sm', 'md'],
-      control: 'radio',
-      description: 'Size of the avatar.',
-    },
-    name: {
-      control: 'text',
-      description: 'Name used for initials and accessibility.',
-    },
-    src: {
-      control: 'object',
-      description: 'Image source object (e.g. { uri: "..." }).',
-    },
-    delayMs: {
-      control: 'number',
-      description: 'Delay in ms before showing the fallback.',
-    },
-  },
-  args: {
-    size: 'md',
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    name: 'Jane Doe',
-    src: { uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' },
-  },
-};
-
-export const Icon: Story = {};
-
-export const Initials: Story = {
-  args: {
-    name: 'Jane Doe',
-  },
-};
-
-export const Image: Story = {
-  args: {
-    name: 'Jane Doe',
-    src: { uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' },
-  },
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <Flex direction="row" spacing="xl" align="center">
-      <Flex direction="column" spacing="md" align="center">
-        <VariantTitle title="SM">
-          <Avatar size="sm" name="Jane Doe" />
-        </VariantTitle>
-      </Flex>
-      <Flex direction="column" spacing="md" align="center">
-        <VariantTitle title="MD">
-          <Avatar size="md" name="Jane Doe" />
-        </VariantTitle>
-      </Flex>
-    </Flex>
-  ),
-};

package/src/components/Avatar/Avatar.tsx

@@ -1,134 +0,0 @@
-import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useEffect, useState } from 'react';
-import { Image, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { getInitials } from '../../utils';
-import BodyText from '../BodyText/BodyText';
-import AvatarProps, { AvatarLoadingStatus } from './Avatar.props';
-
-const Avatar = ({
-  src,
-  name,
-  size = 'md',
-  delayMs = 0,
-  onLoadingStatusChange,
-  style,
-  ...props
-}: AvatarProps) => {
-  const [status, setStatus] = useState<AvatarLoadingStatus>('idle');
-  const [isDelayed, setIsDelayed] = useState(delayMs > 0);
-
-  useEffect(() => {
-    if (!src) {
-      setStatus('idle');
-      return;
-    }
-
-    setStatus('loading');
-  }, [src]);
-
-  useEffect(() => {
-    onLoadingStatusChange?.(status);
-  }, [status, onLoadingStatusChange]);
-
-  useEffect(() => {
-    if (delayMs <= 0) {
-      setIsDelayed(false);
-      return;
-    }
-
-    const timerId = setTimeout(() => {
-      setIsDelayed(false);
-    }, delayMs);
-    return () => clearTimeout(timerId);
-  }, [delayMs]);
-
-  styles.useVariants({ size });
-
-  const initials = getInitials(name);
-
-  const handleLoad = () => setStatus('loaded');
-  const handleError = () => setStatus('error');
-
-  const showImage = src && status === 'loaded';
-  const showFallback = !showImage && !isDelayed;
-
-  const textSize = size === 'sm' ? 'md' : 'lg';
-  const FallbackIcon = size === 'sm' ? UserSmallIcon : UserMediumIcon;
-
-  return (
-    <View
-      {...props}
-      style={[styles.container, style]}
-      accessibilityRole={showImage && name ? 'image' : undefined}
-      accessibilityLabel={showImage ? name : undefined}
-    >
-      {src && (
-        <Image
-          source={src}
-          style={styles.image}
-          onLoad={handleLoad}
-          onError={handleError}
-          accessibilityElementsHidden
-        />
-      )}
-      {showFallback && (
-        <View style={styles.fallback}>
-          {name ? (
-            <BodyText
-              size={textSize}
-              weight="semibold"
-              textTransform="uppercase"
-              style={styles.text}
-            >
-              {initials}
-            </BodyText>
-          ) : (
-            <FallbackIcon />
-          )}
-        </View>
-      )}
-    </View>
-  );
-};
-
-Avatar.displayName = 'Avatar';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    backgroundColor: theme.color.surface.pig.subtle,
-    variants: {
-      size: {
-        sm: {
-          width: theme.components.avatar.sm.width,
-          height: theme.components.avatar.sm.height,
-          borderRadius: theme.components.avatar.sm.borderRadius,
-        },
-        md: {
-          width: theme.components.avatar.md.width,
-          height: theme.components.avatar.md.height,
-          borderRadius: theme.components.avatar.md.borderRadius,
-        },
-      },
-    },
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-  },
-  fallback: {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: theme.color.text.primary,
-  },
-}));
-
-export default Avatar;

package/src/components/Avatar/index.ts

@@ -1,2 +0,0 @@
-export { default as Avatar } from './Avatar';
-export type { default as AvatarProps, AvatarLoadingStatus } from './Avatar.props';

package/src/components/Badge/Badge.context.ts

@@ -1,11 +0,0 @@
-import React, { useContext } from 'react';
-import type BadgeProps from './Badge.props';
-
-export const BadgeContext = React.createContext<{
-  colorScheme?: BadgeProps['colorScheme'];
-  variant?: BadgeProps['variant'];
-  flatBase?: BadgeProps['flatBase'];
-  size?: BadgeProps['size'];
-}>({});
-
-export const useBadgeContext = () => useContext(BadgeContext);

package/src/components/Badge/Badge.figma.tsx

@@ -1,47 +0,0 @@
-import figma from '@figma/code-connect';
-import { Badge } from '../';
-
-figma.connect(Badge, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652', {
-  props: {
-    variant: figma.enum('Variant', {
-      'Subtle - Default': 'subtle',
-      Emphasis: 'emphasis',
-      Outline: 'outline',
-    }),
-    colorScheme: figma.enum('Color Scheme', {
-      Info: 'info',
-      Positive: 'positive',
-      Danger: 'danger',
-      Warning: 'warning',
-      Functional: 'functional',
-      Energy: 'energy',
-      Broadband: 'broadband',
-      Mobile: 'mobile',
-      Insurance: 'insurance',
-      Cashback: 'cashback',
-      Pig: 'pig',
-      Highlight: 'highlight',
-    }),
-    size: figma.enum('Size', {
-      'SM-24': 'sm',
-      'MD-28': 'md',
-    }),
-    flatBase: figma.boolean('Flat Base?'),
-    icon: figma.boolean('Icon?', {
-      true: figma.instance('Icon-20'),
-      false: '',
-    }),
-    text: figma.string('Text'),
-  },
-  example: props => (
-    <Badge
-      variant={props.variant}
-      colorScheme={props.colorScheme}
-      size={props.size}
-      flatBase={props.flatBase}
-      icon={props.icon}
-    >
-      {props.text}
-    </Badge>
-  ),
-});

package/src/components/Badge/Badge.props.ts

@@ -1,26 +0,0 @@
-import type { ComponentType } from 'react';
-import type { ViewProps } from 'react-native';
-
-interface BadgeProps extends ViewProps {
-  variant?: 'subtle' | 'emphasis' | 'outline';
-  colorScheme?:
-    | 'info'
-    | 'positive'
-    | 'danger'
-    | 'warning'
-    | 'functional'
-    | 'energy'
-    | 'broadband'
-    | 'mobile'
-    | 'insurance'
-    | 'cashback'
-    | 'pig'
-    | 'highlight';
-  size?: 'sm' | 'md';
-  icon?: ComponentType;
-  flatBase?: boolean;
-  text?: string | number;
-  numberOfLines?: number;
-}
-
-export default BadgeProps;

package/src/components/Badge/Badge.stories.tsx

@@ -1,184 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Badge } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import type BadgeProps from './Badge.props';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Stories / Badge',
-  component: Badge,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    children: { control: 'text' },
-    variant: {
-      options: ['subtle', 'emphasis', 'outline'],
-      control: 'radio',
-      description: 'Variant of the badge.',
-    },
-    colorScheme: {
-      options: [
-        'info',
-        'positive',
-        'danger',
-        'warning',
-        'functional',
-        'energy',
-        'broadband',
-        'mobile',
-        'insurance',
-        'cashback',
-        'pig',
-        'highlight',
-      ],
-      control: 'select',
-      description: 'Color scheme of the badge.',
-    },
-    flatBase: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Whether the badge has a flat base.',
-    },
-    icon: {
-      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Small'))],
-      control: 'select',
-      description: 'The icon component for the button.',
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    children: 'Badge',
-    variant: 'subtle',
-    colorScheme: 'info',
-    flatBase: false,
-    size: 'sm',
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({ icon: _icon, ...args }) => {
-    // @ts-expect-error - This is a playground
-    const icon = _icon === 'none' ? undefined : Icons[_icon];
-    return <Badge {...args} icon={icon} />;
-  },
-};
-
-export const Subtle: Story = {
-  parameters: {
-    controls: { exclude: ['variant'] },
-  },
-  args: {
-    variant: 'subtle',
-  },
-};
-
-export const Emphasis: Story = {
-  parameters: {
-    controls: { exclude: ['variant'] },
-  },
-  args: {
-    variant: 'emphasis',
-  },
-};
-
-export const Outline: Story = {
-  parameters: {
-    controls: { exclude: ['variant'] },
-  },
-  args: {
-    variant: 'outline',
-  },
-};
-
-export const FlatBase: Story = {
-  parameters: {
-    controls: { exclude: ['flatBase'] },
-  },
-  args: {
-    flatBase: true,
-  },
-};
-
-export const Icon: Story = {
-  render: args => <Badge {...args} icon={TickSmallIcon} />,
-};
-
-export const KitchenSink: Story = {
-  render: () => {
-    const colorSchemes: NonNullable<BadgeProps['colorScheme']>[] = [
-      'info',
-      'positive',
-      'danger',
-      'warning',
-      'functional',
-      'energy',
-      'broadband',
-      'mobile',
-      'insurance',
-      'cashback',
-      'pig',
-      'highlight',
-    ];
-    const sizes: Array<BadgeProps['size']> = ['sm', 'md'];
-
-    return (
-      <Flex direction="column" spacing="lg" style={{ width: '100%' }}>
-        {colorSchemes.map(cs => {
-          // Determine allowed variants per color scheme based on design constraints:
-          // - Remove 'outline' for energy, broadband, mobile, insurance, cashback, pig, highlight
-          // - For highlight only show 'subtle'
-          const noOutlineSchemes: Array<BadgeProps['colorScheme']> = [
-            'energy',
-            'broadband',
-            'mobile',
-            'insurance',
-            'cashback',
-            'pig',
-            'highlight',
-          ];
-          let variantsForScheme: Array<BadgeProps['variant']> = ['subtle', 'emphasis', 'outline'];
-
-          if (noOutlineSchemes.includes(cs)) {
-            variantsForScheme = ['subtle', 'emphasis'];
-          }
-          if (cs === 'highlight') {
-            variantsForScheme = ['subtle'];
-          }
-
-          return (
-            <Box key={cs} gap="200">
-              <VariantTitle title={cs.charAt(0).toUpperCase() + cs.slice(1)}>
-                <Flex direction="column" spacing="sm">
-                  {sizes.map(sz => (
-                    <Flex key={sz} direction="row" align="center" spacing="md">
-                      {variantsForScheme.map(variant => (
-                        <Badge
-                          key={`${cs}-${sz}-${variant}`}
-                          colorScheme={cs}
-                          size={sz}
-                          variant={variant}
-                        >
-                          {`${variant} ${sz}`}
-                        </Badge>
-                      ))}
-                    </Flex>
-                  ))}
-                </Flex>
-              </VariantTitle>
-            </Box>
-          );
-        })}
-      </Flex>
-    );
-  },
-};