@utilitywarehouse/hearth-react-native 0.7.0 → 0.8.1

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,264 @@
+import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+import { Heading } from '../Heading';
+import { IconContainer } from '../IconContainer';
+import { ThemedImage } from '../ThemedImage';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type BannerProps from './Banner.props';
+
+const Banner = ({
+  icon,
+  iconContainerVariant = 'subtle',
+  iconContainerSize = 'md',
+  iconContainerColor = 'pig',
+  illustration,
+  image,
+  heading,
+  description,
+  direction = 'horizontal',
+  link,
+  button,
+  onPress,
+  onClose,
+  variant = 'subtle',
+  colorScheme = 'pig',
+  style,
+  ...props
+}: BannerProps) => {
+  const hasIllustration = Boolean(illustration);
+  styles.useVariants({ direction, hasIllustration });
+
+  const renderIconOrImage = () => {
+    if (icon) {
+      return (
+        <IconContainer
+          icon={icon}
+          variant={iconContainerVariant}
+          size={iconContainerSize}
+          color={iconContainerColor}
+          style={styles.media}
+        />
+      );
+    }
+    if (illustration) {
+      return (
+        <ThemedImage
+          light={illustration.light}
+          dark={illustration.dark}
+          style={styles.image}
+          accessible
+          accessibilityLabel={heading}
+        />
+      );
+    }
+    if (image) {
+      return (
+        <View style={[styles.media, styles.imageWrapper]}>
+          <ThemedImage
+            light={image.light}
+            dark={image.dark}
+            style={styles.image}
+            accessible
+            accessibilityLabel={heading}
+          />
+        </View>
+      );
+    }
+    return null;
+  };
+
+  const renderAction = () => {
+    if (link) {
+      return <View style={styles.action}>{link}</View>;
+    }
+    if (button) {
+      return <View style={styles.action}>{button}</View>;
+    }
+    return null;
+  };
+
+  const content = (
+    <View style={styles.container}>
+      {renderIconOrImage()}
+      <View style={styles.contentContainer}>
+        <View style={styles.textContainer}>
+          <Heading
+            size="sm"
+            style={styles.heading}
+            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+          >
+            {heading}
+          </Heading>
+          <BodyText
+            size="md"
+            style={styles.description}
+            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+          >
+            {description}
+          </BodyText>
+          {renderAction()}
+        </View>
+        {onPress && (
+          <UnstyledIconButton
+            icon={ChevronRightSmallIcon}
+            size="sm"
+            onPress={onPress}
+            style={styles.chevron}
+          />
+        )}
+        {onClose && (
+          <UnstyledIconButton
+            icon={CloseSmallIcon}
+            size="sm"
+            onPress={onClose}
+            style={styles.closeButton}
+            accessibilityLabel="Close banner"
+          />
+        )}
+      </View>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Card variant={variant} style={[styles.card, style]} {...props}>
+        <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
+          {content}
+        </Pressable>
+      </Card>
+    );
+  }
+
+  return (
+    <Card variant={variant} style={[styles.card, style]} {...props}>
+      {content}
+    </Card>
+  );
+};
+
+Banner.displayName = 'Banner';
+
+const styles = StyleSheet.create(theme => ({
+  card: {},
+  pressable: {
+    width: '100%',
+  },
+  container: {
+    flexDirection: 'row',
+    gap: theme.space.lg,
+    variants: {
+      direction: {
+        horizontal: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+        },
+        vertical: {
+          flexDirection: 'column',
+          alignItems: 'stretch',
+        },
+      },
+      hasIllustration: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: false,
+        styles: {
+          alignItems: 'flex-start',
+        },
+      },
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          alignItems: 'center',
+        },
+      },
+    ],
+  },
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.color.border.strong,
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: theme.space.lg,
+  },
+  textContainer: {
+    flex: 1,
+    gap: theme.space.lg,
+  },
+  heading: {
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          textAlign: 'center',
+        },
+      },
+    ],
+  },
+  description: {
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          textAlign: 'center',
+        },
+      },
+    ],
+  },
+  action: {
+    alignSelf: 'flex-start',
+  },
+  chevron: {
+    alignSelf: 'center',
+  },
+  closeButton: {
+    alignSelf: 'flex-start',
+  },
+}));
+
+export default Banner;

package/src/components/Banner/index.ts

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

package/src/components/BottomSheet/BottomSheetBackdrop.tsx

@@ -9,7 +9,6 @@ const BottomSheetBackdrop = ({ style, ...props }: BottomSheetDefaultBackdropProp
   const theme = useTheme();
   return (
     <StyledBottomSheetBackdrop
-      // @ts-expect-error - style prop type issue
       style={[styles.backdrop, style]}
       opacity={theme.components.overlay.opacity / 100}
       appearsOnIndex={0}

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -19,7 +19,6 @@ const BottomSheetFlatList = ({
 
   return (
     <StyledBottomSheetFlatList
-      // @ts-expect-error - style prop type issue
       style={[styles.container, style]}
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       {...props}

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -7,7 +7,6 @@ const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
   return (
     <StyledBottomSheetHandle
-      // @ts-expect-error - style prop type issue
       style={[styles.handle, style]}
       indicatorStyle={[styles.indicator, indicatorStyle]}
       {...props}

package/src/components/Card/Card.docs.mdx

@@ -17,10 +17,18 @@ A Card component serves as a visual container that groups related content and ac
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
+  - [`CardPressHandler` Props](#cardpresshandler-props)
+  - [`CardAction` Props](#cardaction-props)
 - [Variants](#variants)
 - [Examples](#examples)
   - [Interactive](#interactive)
   - [With `CardAction`](#with-cardaction)
+    - [`CardAction` Playground](#cardaction-playground)
+    - [`CardAction` With Badge](#cardaction-with-badge)
+    - [`CardAction` Size Variants](#cardaction-size-variants)
+    - [`CardAction` Advanced Usage with Children](#cardaction-advanced-usage-with-children)
+    - [`CardAction` Component Parts](#cardaction-component-parts)
+    - [`CardAction` Accessibility](#cardaction-accessibility)
 
 ## Playground
 
@@ -69,13 +77,13 @@ const MyComponent = () => (
 | rowGap         | `number`                                                                                                                                     | The row gap between the content.           | `0`               |
 | columnGap      | `number`                                                                                                                                     | The column gap between the content.        | `0`               |
 
-### `CardPressHandler`
+### `CardPressHandler` Props
 
 | Property         | Type     | Description                                                                 | Default   |
 | ---------------- | -------- | --------------------------------------------------------------------------- | --------- |
 | handlerToInherit | `string` | The handler to inherit from the child component when the `Card` is pressed. | `onPress` |
 
-### `CardAction`
+### `CardAction` Props
 
 | Property             | Type                                                                                               | Description                                              | Default    |
 | -------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |

package/src/components/Expandable/Expandable.docs.mdx

@@ -0,0 +1,201 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { BodyText, Button, Card, Center } from '../../';
+import { BackToTopButton, UsageWrap } from '../../../docs/components';
+import * as Stories from './Expandable.stories';
+
+<Meta title="Utility Components / Expandable" />
+
+<BackToTopButton />
+
+# Expandable
+
+The Expandable component is a primitive for creating expandable content with smooth animations. It's commonly used as a building block for components like accordions, collapsible sections, and other interactive content that needs to expand and collapse.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Animation Duration](#animation-duration)
+- [Examples](#examples)
+  - [Basic Example](#basic-example)
+  - [With Different Animation Speeds](#with-different-animation-speeds)
+  - [Multiple Expandables](#multiple-expandables)
+  - [Controlled Example](#controlled-example)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<Canvas of={Stories.BasicExample} />
+
+```tsx
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View>
+      <Button onPress={() => setExpanded(!expanded)}>Toggle Content</Button>
+      <Expandable expanded={expanded}>
+        <Card>
+          <BodyText>This content expands and collapses with a smooth animation.</BodyText>
+        </Card>
+      </Expandable>
+    </View>
+  );
+};
+```
+
+## Props
+
+| Prop                 | Type                          | Default | Description                                          |
+| -------------------- | ----------------------------- | ------- | ---------------------------------------------------- |
+| `expanded`           | `boolean`                     | `false` | Whether the content is expanded                      |
+| `onExpandedChange`   | `(expanded: boolean) => void` | -       | Callback when expanded state changes                 |
+| `children`           | `ReactNode`                   | -       | The content to expand/collapse                       |
+| `duration`           | `number`                      | `200`   | Duration of the animation in milliseconds            |
+| `animateOpacity`     | `boolean`                     | `true`  | Whether to animate opacity during expansion/collapse |
+| `style`              | `ViewStyle`                   | -       | Additional style for the container                   |
+| `accessibilityLabel` | `string`                      | -       | Accessibility label for screen readers               |
+| `testID`             | `string`                      | -       | Test ID for testing purposes                         |
+
+## Animation Duration
+
+The `duration` prop controls how long the expand/collapse animation takes. The default is 200ms, which provides a smooth, natural feel. You can adjust this for faster or slower animations.
+
+<Canvas of={Stories.FastAnimation} />
+
+```tsx
+// Fast animation (150ms)
+<Expandable expanded={expanded} duration={150}>
+  <Card>
+    <BodyText>Quick animation</BodyText>
+  </Card>
+</Expandable>
+
+// Slow animation (600ms)
+<Expandable expanded={expanded} duration={600}>
+  <Card>
+    <BodyText>Slow animation</BodyText>
+  </Card>
+</Expandable>
+```
+
+## Examples
+
+### Basic Example
+
+<Canvas of={Stories.BasicExample} />
+
+### With Different Animation Speeds
+
+<Canvas of={Stories.FastAnimation} />
+<Canvas of={Stories.SlowAnimation} />
+
+### Multiple Expandables
+
+<Canvas of={Stories.MultipleExpandables} />
+
+```tsx
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [expanded1, setExpanded1] = useState(false);
+  const [expanded2, setExpanded2] = useState(false);
+  const [expanded3, setExpanded3] = useState(false);
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View>
+        <Button onPress={() => setExpanded1(!expanded1)}>Section 1 {expanded1 ? '▲' : '▼'}</Button>
+        <Expandable expanded={expanded1}>
+          <Card>
+            <BodyText>Content for section 1</BodyText>
+          </Card>
+        </Expandable>
+      </View>
+
+      <View>
+        <Button onPress={() => setExpanded2(!expanded2)}>Section 2 {expanded2 ? '▲' : '▼'}</Button>
+        <Expandable expanded={expanded2}>
+          <Card>
+            <BodyText>Content for section 2</BodyText>
+          </Card>
+        </Expandable>
+      </View>
+
+      <View>
+        <Button onPress={() => setExpanded3(!expanded3)}>Section 3 {expanded3 ? '▲' : '▼'}</Button>
+        <Expandable expanded={expanded3}>
+          <Card>
+            <BodyText>Content for section 3</BodyText>
+          </Card>
+        </Expandable>
+      </View>
+    </View>
+  );
+};
+```
+
+### Controlled Example
+
+<Canvas of={Stories.ControlledExample} />
+
+```tsx
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Expandable, Button, Card, BodyText } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <Button onPress={() => setExpanded(true)}>Expand</Button>
+        <Button onPress={() => setExpanded(false)}>Collapse</Button>
+      </View>
+      <Expandable
+        expanded={expanded}
+        onExpandedChange={setExpanded}
+        accessibilityLabel="Expandable content section"
+      >
+        <Card>
+          <BodyText>Controlled expandable content</BodyText>
+        </Card>
+      </Expandable>
+    </View>
+  );
+};
+```
+
+## Accessibility
+
+The Expandable component includes built-in accessibility support:
+
+- Uses `accessibilityState` to communicate expanded/collapsed state to screen readers
+- Set `accessibilityLabel` to provide context about the expandable content
+- Automatically announces state changes to assistive technologies
+
+```tsx
+<Expandable expanded={expanded} accessibilityLabel="Additional information section">
+  {/* content */}
+</Expandable>
+```
+
+### Screen Reader Announcements
+
+When using the Expandable component:
+
+- The `accessibilityState` prop automatically includes the `expanded` state
+- Screen readers will announce "expanded" or "collapsed" based on the current state
+- Provide descriptive `accessibilityLabel` values to give users context

package/src/components/Expandable/Expandable.props.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ViewProps, ViewStyle } from 'react-native';
+
+export interface ExpandableProps extends ViewProps {
+  /**
+   * Whether the content is expanded
+   */
+  expanded?: boolean;
+
+  /**
+   * Callback when expanded state changes
+   */
+  onExpandedChange?: (expanded: boolean) => void;
+
+  /**
+   * The content to expand/collapse
+   */
+  children: ReactNode;
+
+  /**
+   * Duration of the animation in milliseconds
+   * @default 200
+   */
+  duration?: number;
+
+  /**
+   * Additional style for the container
+   */
+  style?: ViewStyle;
+
+  /**
+   * Accessibility label for screen readers
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Whether to animate opacity during expansion/collapse
+   * @default true
+   */
+  animateOpacity?: boolean;
+}