@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/src/components/Combobox/ComboboxOption.tsx

@@ -0,0 +1,100 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useComboboxContext } from './Combobox.context';
+import { ComboboxOptionProps } from './Combobox.props';
+
+const ComboboxOption = ({
+  label,
+  value,
+  leadingIcon: LeftIcon,
+  trailingIcon: RightIcon,
+  selected,
+  disabled,
+  onPress,
+}: ComboboxOptionProps) => {
+  const { selectedValue, selectOption } = useComboboxContext();
+  const isSelected = selected !== undefined ? selected : selectedValue === value;
+
+  styles.useVariants({ disabled });
+
+  const handlePress = () => {
+    if (disabled) {
+      return;
+    }
+
+    if (onPress) {
+      onPress(value);
+      return;
+    }
+
+    selectOption({ label, value });
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      style={({ pressed }) => [styles.container, pressed && styles.pressed]}
+    >
+      {!!LeftIcon && (
+        <View>
+          <Icon as={LeftIcon} style={styles.icon} />
+        </View>
+      )}
+
+      <View style={styles.labelContainer}>
+        <BodyText>{label}</BodyText>
+      </View>
+
+      {isSelected && (
+        <View>
+          <Icon as={TickSmallIcon} style={styles.icon} />
+        </View>
+      )}
+      {!!RightIcon && !isSelected && (
+        <View>
+          <Icon as={RightIcon} style={styles.icon} />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.select.dropdown.item.gap,
+    borderRadius: theme.components.select.dropdown.item.borderRadius,
+    paddingVertical: theme.components.select.dropdown.item.padding,
+    paddingHorizontal: theme.components.select.dropdown.padding,
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+      },
+    },
+  },
+  icon: {
+    color: theme.color.interactive.functional.foreground.subtle,
+  },
+  pressed: {
+    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+  },
+  labelContainer: {
+    flex: 1,
+  },
+}));
+
+ComboboxOption.displayName = 'ComboboxOption';
+
+export default ComboboxOption;

package/src/components/Combobox/index.ts

@@ -0,0 +1,9 @@
+export { default as Combobox } from './Combobox';
+export { ComboboxContext, useComboboxContext } from './Combobox.context';
+export { default as ComboboxOption } from './ComboboxOption';
+export type {
+  default as ComboboxProps,
+  ComboboxOptionItemProps,
+  ComboboxOptionProps,
+  ComboboxRenderContentProps,
+} from './Combobox.props';

package/src/components/Modal/Modal.tsx

@@ -6,15 +6,8 @@ import {
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import {
-  AccessibilityInfo,
-  Dimensions,
-  Platform,
-  ScrollView,
-  View,
-  findNodeHandle,
-} from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -29,6 +22,7 @@ import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { Button } from '../Button';
 import { Heading } from '../Heading';
+import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import ModalProps from './Modal.props';
@@ -69,16 +63,6 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
   const isBrandBackground = background === 'brand';
 
-  const [inNavModalHeight, setInNavModalHeight] = useState<number>();
-
-  const isNavModalFullScreen = useMemo(() => {
-    if (!inNavModalHeight || !inNavModal) return false;
-
-    const screenHeight = Dimensions.get('window').height;
-
-    return inNavModalHeight >= screenHeight;
-  }, [inNavModalHeight, inNavModal]);
-
   const triggerCloseAnimation = useCallback(() => {
     if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
@@ -90,7 +74,7 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
+  }, [inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
@@ -157,30 +141,30 @@ const Modal = ({
     props.onChange?.(index, position, type);
   };
 
-  const handleCloseButtonPress = () => {
+  const handleCloseButtonPress = useCallback(() => {
     bottomSheetModalRef.current?.dismiss();
     if (onPressCloseButton) {
       onPressCloseButton();
     }
-  };
+  }, [onPressCloseButton]);
 
-  const handlePrimaryButtonPress = () => {
+  const handlePrimaryButtonPress = useCallback(() => {
     if (onPressPrimaryButton) {
       onPressPrimaryButton();
     }
     if (closeOnPrimaryButtonPress) {
       bottomSheetModalRef.current?.dismiss();
     }
-  };
+  }, [closeOnPrimaryButtonPress, onPressPrimaryButton]);
 
-  const handleSecondaryButtonPress = () => {
+  const handleSecondaryButtonPress = useCallback(() => {
     if (onPressSecondaryButton) {
       onPressSecondaryButton();
     }
     if (closeOnSecondaryButtonPress) {
       bottomSheetModalRef.current?.dismiss();
     }
-  };
+  }, [closeOnSecondaryButtonPress, onPressSecondaryButton]);
 
   const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
 
@@ -191,34 +175,45 @@ const Modal = ({
     stickyFooter,
     showHandle: props.showHandle,
     background: isBrandBackground ? 'brand' : 'primary',
-    ...(inNavModal && {
-      fullscreen: isNavModalFullScreen,
-    }),
   });
 
-  const footer = (
-    <View style={styles.footer}>
-      {onPressPrimaryButton && primaryButtonText ? (
-        <Button
-          onPress={handlePrimaryButtonPress}
-          text={primaryButtonText}
-          inverted={isBrandBackground && inNavModal}
-          {...primaryButtonProps}
-          variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-          colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-        />
-      ) : null}
-      {onPressSecondaryButton && secondaryButtonText ? (
-        <Button
-          onPress={handleSecondaryButtonPress}
-          text={secondaryButtonText}
-          inverted={isBrandBackground && inNavModal}
-          {...secondaryButtonProps}
-          variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-          colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-        />
-      ) : null}
-    </View>
+  const footer = useMemo(
+    () => (
+      <View style={styles.footer}>
+        {onPressPrimaryButton && primaryButtonText ? (
+          <Button
+            onPress={handlePrimaryButtonPress}
+            text={primaryButtonText}
+            inverted={isBrandBackground && inNavModal}
+            {...primaryButtonProps}
+            variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+            colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+          />
+        ) : null}
+        {onPressSecondaryButton && secondaryButtonText ? (
+          <Button
+            onPress={handleSecondaryButtonPress}
+            text={secondaryButtonText}
+            inverted={isBrandBackground && inNavModal}
+            {...secondaryButtonProps}
+            variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+            colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+          />
+        ) : null}
+      </View>
+    ),
+    [
+      handlePrimaryButtonPress,
+      handleSecondaryButtonPress,
+      inNavModal,
+      isBrandBackground,
+      onPressPrimaryButton,
+      onPressSecondaryButton,
+      primaryButtonProps,
+      primaryButtonText,
+      secondaryButtonProps,
+      secondaryButtonText,
+    ]
   );
 
   const InNavModalContainer = scrollable ? ScrollView : View;
@@ -327,21 +322,11 @@ const Modal = ({
         <View style={styles.footerWrap}>{footer}</View>
       </BottomSheetFooter>
     ),
-    [
-      onPressPrimaryButton,
-      primaryButtonText,
-      onPressSecondaryButton,
-      secondaryButtonText,
-      primaryButtonProps,
-      secondaryButtonProps,
-    ]
+    [footer]
   );
 
   return inNavModal ? (
     <View
-      onLayout={e => {
-        setInNavModalHeight(e.nativeEvent.layout.height);
-      }}
       style={{
         flex: 1,
         backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
@@ -355,7 +340,9 @@ const Modal = ({
       <Animated.View
         style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.inNavModalContent}>{content}</View>
+        <SafeAreaView edges={['top', 'bottom']} style={styles.inNavModalContent}>
+          {content}
+        </SafeAreaView>
       </Animated.View>
     </View>
   ) : (
@@ -486,7 +473,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     borderTopLeftRadius: theme.components.modal.borderRadius,
     borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+    padding: theme.components.bottomSheet.padding,
     variants: {
       background: {
         primary: {},
@@ -494,15 +481,6 @@ const styles = StyleSheet.create((theme, rt) => ({
           backgroundColor: theme.color.background.brand,
         },
       },
-      fullscreen: {
-        true: {
-          padding: theme.components.bottomSheet.padding,
-          paddingTop: rt.insets.top,
-        },
-        false: {
-          padding: theme.components.bottomSheet.padding,
-        },
-      },
     },
   },
   inNavModalFooterContainer: {

package/src/components/Modal/Modal.web.tsx

@@ -310,13 +310,13 @@ const styles = StyleSheet.create((theme, rt) => ({
     borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
     gap: theme.components.modal.gap,
-    padding: theme.components.modal.padding,
+    padding: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.modal.padding,
-    paddingRight: theme.components.modal.padding,
+    paddingLeft: theme.components.bottomSheet.padding,
+    paddingRight: theme.components.bottomSheet.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {

package/src/components/Pagination/Pagination.docs.mdx

@@ -0,0 +1,99 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Box, Center, Pagination } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Pagination.stories';
+
+<Meta title="Components / Pagination" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6416-5836&t=pZwKJYFo1y1QRQD1-4" />
+
+# Pagination
+
+Pagination helps users move between pages of content while keeping the current position visible. It supports both a full page list and a condensed “Page X of Y” layout.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 520, maxWidth: '100%' }}>
+      <Pagination currentPage={3} totalPages={10} onPageChange={() => {}} />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Pagination } from '@utilitywarehouse/hearth-react-native';
+import { useState } from 'react';
+
+const MyComponent = () => {
+  const [page, setPage] = useState(3);
+
+  return <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />;
+};
+```
+
+## Props
+
+| Property          | Type                     | Description                                       | Default  |
+| ----------------- | ------------------------ | ------------------------------------------------- | -------- |
+| `currentPage`     | `number`                 | The current active page number.                   | Required |
+| `totalPages`      | `number`                 | Total number of pages available.                  | Required |
+| `onPageChange`    | `(page: number) => void` | Called when the user selects a different page.    | Required |
+| `condensed`       | `boolean`                | Displays “Page X of Y” instead of numbered items. | `false`  |
+| `hideSkipButtons` | `boolean`                | Hides the first and last page controls.           | `false`  |
+
+## Examples
+
+### Condensed
+
+<Canvas of={Stories.Condensed} />
+
+```tsx
+const [currentPage, setCurrentPage] = useState(1);
+
+<Pagination condensed currentPage={currentPage} onPageChange={setCurrentPage} totalPages={10} />;
+```
+
+### Without skip buttons
+
+<Canvas of={Stories.WithoutSkipButtons} />
+
+```tsx
+const [currentPage, setCurrentPage] = useState(3);
+
+<Pagination
+  currentPage={currentPage}
+  hideSkipButtons
+  onPageChange={setCurrentPage}
+  totalPages={10}
+/>;
+```
+
+### Edge cases
+
+<Canvas of={Stories.EdgeCases} />
+
+```tsx
+const [nearStartPage, setNearStartPage] = useState(2);
+const [middlePage, setMiddlePage] = useState(5);
+const [nearEndPage, setNearEndPage] = useState(9);
+
+<Flex direction="column" spacing="lg" style={{ width: '100%', maxWidth: 520 }}>
+  <Pagination currentPage={nearStartPage} onPageChange={setNearStartPage} totalPages={10} />
+  <Pagination currentPage={middlePage} onPageChange={setMiddlePage} totalPages={10} />
+  <Pagination currentPage={nearEndPage} onPageChange={setNearEndPage} totalPages={10} />
+</Flex>;
+```

package/src/components/Pagination/Pagination.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Pagination } from './';
+
+figma.connect(
+  Pagination,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6416-5836&t=pZwKJYFo1y1QRQD1-4',
+  {
+    props: {
+      condensed: figma.boolean('Condensed?'),
+    },
+    example: props => (
+      <Pagination
+        currentPage={1}
+        totalPages={10}
+        onPageChange={() => {}}
+        condensed={props.condensed}
+      />
+    ),
+  }
+);

package/src/components/Pagination/Pagination.props.ts

@@ -0,0 +1,28 @@
+import type { ViewProps } from 'react-native';
+
+export interface PaginationProps extends ViewProps {
+  /**
+   * The current active page number (1-indexed).
+   */
+  currentPage: number;
+  /**
+   * The total number of pages.
+   */
+  totalPages: number;
+  /**
+   * Callback fired when the page changes.
+   */
+  onPageChange: (page: number) => void;
+  /**
+   * Whether to show condensed copy instead of individual page items.
+   * @default false
+   */
+  condensed?: boolean;
+  /**
+   * Whether to hide the first and last page controls.
+   * @default false
+   */
+  hideSkipButtons?: boolean;
+}
+
+export default PaginationProps;

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/react-native';
+import { useState } from 'react';
+import { BodyText } from '../BodyText';
+import { Flex } from '../Flex';
+import { Pagination } from './';
+
+const meta = {
+  title: 'Stories / Pagination',
+  component: Pagination,
+  args: {
+    currentPage: 1,
+    totalPages: 10,
+    condensed: false,
+    hideSkipButtons: false,
+  },
+  argTypes: {
+    currentPage: { control: { type: 'number', min: 1 } },
+    totalPages: { control: { type: 'number', min: 1 } },
+    condensed: { control: 'boolean' },
+    hideSkipButtons: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args: StoryObj<typeof meta.args>) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage);
+
+    return <Pagination {...args} currentPage={currentPage} onPageChange={setCurrentPage} />;
+  },
+};
+
+export const Condensed: Story = {
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+      <Pagination
+        condensed
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+        totalPages={10}
+      />
+    );
+  },
+};
+
+export const WithoutSkipButtons: Story = {
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(3);
+
+    return (
+      <Pagination
+        currentPage={currentPage}
+        hideSkipButtons
+        onPageChange={setCurrentPage}
+        totalPages={10}
+      />
+    );
+  },
+};
+
+export const EdgeCases: Story = {
+  render: () => {
+    const [nearStartPage, setNearStartPage] = useState(2);
+    const [middlePage, setMiddlePage] = useState(5);
+    const [nearEndPage, setNearEndPage] = useState(9);
+
+    return (
+      <Flex direction="column" spacing="lg" style={{ width: '100%', maxWidth: 520 }}>
+        <Flex direction="column" spacing="xs">
+          <BodyText size="sm">Near start</BodyText>
+          <Pagination currentPage={nearStartPage} onPageChange={setNearStartPage} totalPages={10} />
+        </Flex>
+        <Flex direction="column" spacing="xs">
+          <BodyText size="sm">Middle</BodyText>
+          <Pagination currentPage={middlePage} onPageChange={setMiddlePage} totalPages={10} />
+        </Flex>
+        <Flex direction="column" spacing="xs">
+          <BodyText size="sm">Near end</BodyText>
+          <Pagination currentPage={nearEndPage} onPageChange={setNearEndPage} totalPages={10} />
+        </Flex>
+      </Flex>
+    );
+  },
+};