@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,222 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { useRef } from 'react';
+import { Dimensions, ImageSourcePropType, Platform, View, ViewProps } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Modal } from '.';
+import pigs from '../../../docs/assets/pigs.png';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal } from '../BottomSheet';
+import { Box } from '../Box';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Stories / Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+    noScroll: true,
+  },
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'The heading text to be displayed.',
+    },
+    description: {
+      control: 'text',
+      description: 'The description text to be displayed.',
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: 'Whether to show the close button.',
+    },
+    primaryButtonText: {
+      control: 'text',
+      description: 'Text for the primary button.',
+    },
+    secondaryButtonText: {
+      control: 'text',
+      description: 'Text for the secondary button.',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Whether the modal is in a loading state.',
+    },
+    onPressPrimaryButton: { action: () => null },
+    onPressSecondaryButton: { action: () => null },
+    onPressCloseButton: { action: () => null },
+  },
+  args: {
+    heading: 'Modal Heading',
+    description: 'This is a modal description',
+    showCloseButton: true,
+    primaryButtonText: 'Primary',
+    secondaryButtonText: 'Cancel',
+    loading: false,
+    onPressCloseButton: () => null,
+    onPressPrimaryButton: () => null,
+    onPressSecondaryButton: () => null,
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ViewWrap = ({ children }: { children: ViewProps['children'] }) => (
+  <View
+    style={{
+      width: Platform.OS === 'web' ? '100%' : Dimensions.get('window').width,
+      height:
+        Platform.OS === 'web'
+          ? '100%'
+          : Dimensions.get('window').height -
+            UnistylesRuntime.insets.top -
+            UnistylesRuntime.insets.bottom -
+            33,
+
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      flex: 1,
+      marginVertical: Platform.OS === 'web' ? 0 : -8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 16,
+    }}
+  >
+    {children}
+  </View>
+);
+
+export const Playground: Story = {
+  args: {
+    children: [],
+  },
+  render: ({ ...args }) => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal ref={modalRef} {...args} />
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const WithImage = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Modal Heading"
+          description="This is a modal description"
+          onPressCloseButton={closeModal}
+          primaryButtonText="Primary"
+          onPressPrimaryButton={closeModal}
+          secondaryButtonText="Cancel"
+          onPressSecondaryButton={closeModal}
+          index={1}
+          image={{
+            source: pigs as ImageSourcePropType,
+            resizeMode: 'contain',
+          }}
+        />
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const WithCustomContent = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Modal Heading"
+          description="This is a modal description"
+          onPressCloseButton={closeModal}
+          primaryButtonText="Primary"
+          onPressPrimaryButton={closeModal}
+          secondaryButtonText="Cancel"
+          onPressSecondaryButton={closeModal}
+        >
+          <Box gap="200">
+            <BodyText>This is a modal with content.</BodyText>
+            <BodyText>You can swipe it up and down to close.</BodyText>
+          </Box>
+        </Modal>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const Loading = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Modal Heading"
+          description="This is a modal description"
+          onPressCloseButton={closeModal}
+          primaryButtonText="Primary"
+          onPressPrimaryButton={closeModal}
+          secondaryButtonText="Cancel"
+          onPressSecondaryButton={closeModal}
+          loading
+        >
+          <Box gap="200">
+            <BodyText>This is a modal with content.</BodyText>
+            <BodyText>You can swipe it up and down to close.</BodyText>
+          </Box>
+        </Modal>
+      </ViewWrap>
+    </View>
+  );
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,351 @@
+import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } 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, useRef } from 'react';
+import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { hexWithOpacity } from '../../utils';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import ModalProps from './Modal.props';
+
+type Modal<T = any> = BottomSheetModalMethods<T> & { triggerCloseAnimation?: () => void };
+
+const Modal = ({
+  ref,
+  children,
+  heading,
+  description,
+  showCloseButton = true,
+  primaryButtonText,
+  secondaryButtonText,
+  onPressPrimaryButton,
+  onPressCloseButton,
+  onPressSecondaryButton,
+  closeOnPrimaryButtonPress = true,
+  closeOnSecondaryButtonPress = true,
+  loading,
+  image,
+  primaryButtonProps,
+  secondaryButtonProps,
+  closeButtonProps,
+  fullscreen = false,
+  ...props
+}: ModalProps) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const viewRef = useRef<View>(null);
+  const scrollViewRef = useRef<BottomSheetScrollViewMethods>(null);
+  const theme = useTheme();
+  const backgroundOpacity = useSharedValue(0);
+  const pretendContentTranslateY = useSharedValue(20);
+
+  const triggerCloseAnimation = useCallback(() => {
+    if (Platform.OS === 'android' && fullscreen) {
+      pretendContentTranslateY.value = withTiming(20, {
+        duration: 50,
+        easing: Easing.in(Easing.quad),
+      });
+      backgroundOpacity.value = withTiming(0, {
+        duration: 100,
+        easing: Easing.in(Easing.quad),
+      });
+    }
+  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+
+  useImperativeHandle(ref, () => ({
+    ...(bottomSheetModalRef.current as BottomSheetModal),
+    triggerCloseAnimation,
+  }));
+
+  // Trigger animations on render for fullscreen Android modal
+  useEffect(() => {
+    if (Platform.OS === 'android' && fullscreen) {
+      backgroundOpacity.value = withDelay(
+        300,
+        withTiming(1, {
+          duration: 200,
+          easing: Easing.out(Easing.quad),
+        })
+      );
+      pretendContentTranslateY.value = withDelay(
+        500,
+        withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.quad),
+        })
+      );
+    }
+  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+
+  const animatedBackgroundStyle = useAnimatedStyle(() => ({
+    backgroundColor: hexWithOpacity(
+      theme.components.overlay.backgroundColor,
+      backgroundOpacity.value * (theme.components.overlay.opacity / 100)
+    ),
+  }));
+
+  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+    backgroundColor: hexWithOpacity(
+      theme.components.overlay.backgroundColor,
+      backgroundOpacity.value * (theme.components.overlay.opacity / 100)
+    ),
+  }));
+
+  const animatedPretendContentStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: pretendContentTranslateY.value }],
+  }));
+
+  const handleChange = (index: number, position: number, type: SNAP_POINT_TYPE) => {
+    if (index > -1) {
+      // Add a small delay to ensure the modal is fully rendered
+      setTimeout(() => {
+        // Announce the modal opening to screen readers
+        AccessibilityInfo.announceForAccessibility('Modal opened.');
+
+        const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+        const targetRef = viewRef.current;
+        if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+          const nodeHandle = findNodeHandle(
+            Platform.OS === 'android' ? targetRef : scrollViewTargetRef
+          );
+          if (nodeHandle) {
+            AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+          }
+        }
+      }, 100);
+    }
+    props.onChange?.(index, position, type);
+  };
+
+  const handleCloseButtonPress = () => {
+    bottomSheetModalRef.current?.dismiss();
+    if (onPressCloseButton) {
+      onPressCloseButton();
+    }
+  };
+
+  const handlePrimaryButtonPress = () => {
+    if (onPressPrimaryButton) {
+      onPressPrimaryButton();
+    }
+    if (closeOnPrimaryButtonPress) {
+      bottomSheetModalRef.current?.dismiss();
+    }
+  };
+
+  const handleSecondaryButtonPress = () => {
+    if (onPressSecondaryButton) {
+      onPressSecondaryButton();
+    }
+    if (closeOnSecondaryButtonPress) {
+      bottomSheetModalRef.current?.dismiss();
+    }
+  };
+
+  styles.useVariants({ loading });
+
+  const content = (
+    <>
+      {loading ? (
+        <View
+          style={styles.loadingContainer}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Loading' : undefined}
+          screenReaderFocusable
+          ref={viewRef}
+        >
+          <Spinner size="lg" />
+          <Heading size="lg" textAlign="center">
+            Loading...
+          </Heading>
+        </View>
+      ) : (
+        <View
+          style={styles.container}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Modal content' : undefined}
+          screenReaderFocusable
+          ref={viewRef}
+        >
+          <View style={styles.header}>
+            <View style={styles.headerTextContent}>
+              {heading && !image ? (
+                <Heading size="lg" accessible>
+                  {heading}
+                </Heading>
+              ) : null}
+              {description && !image ? <BodyText accessible>{description}</BodyText> : null}
+            </View>
+            {showCloseButton ? (
+              <UnstyledIconButton
+                icon={CloseMediumIcon}
+                onPress={handleCloseButtonPress}
+                accessibilityLabel="Close modal"
+                {...closeButtonProps}
+              />
+            ) : null}
+          </View>
+          {image ? (
+            <View style={styles.imageContainer}>
+              <Image style={styles.image} {...image} />
+              <View style={styles.textContent}>
+                {heading ? (
+                  <Heading size="lg" textAlign="center" accessible>
+                    {heading}
+                  </Heading>
+                ) : null}
+                {description ? (
+                  <BodyText textAlign="center" accessible>
+                    {description}
+                  </BodyText>
+                ) : null}
+              </View>
+            </View>
+          ) : null}
+          {children}
+          <View style={styles.footer}>
+            {onPressPrimaryButton && primaryButtonText ? (
+              <Button
+                onPress={handlePrimaryButtonPress}
+                text={primaryButtonText}
+                {...primaryButtonProps}
+                variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+                colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+              />
+            ) : null}
+            {onPressSecondaryButton && secondaryButtonText ? (
+              <Button
+                onPress={handleSecondaryButtonPress}
+                text={secondaryButtonText}
+                {...secondaryButtonProps}
+                variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+                colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+              />
+            ) : null}
+          </View>
+        </View>
+      )}
+    </>
+  );
+
+  return fullscreen ? (
+    <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
+      {Platform.OS === 'android' ? (
+        <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
+          <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
+        </Animated.View>
+      ) : null}
+      <Animated.View
+        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+      >
+        <View style={styles.fullscreenContent}>{content}</View>
+      </Animated.View>
+    </View>
+  ) : (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      enableDynamicSizing={true}
+      snapPoints={image ? ['90%'] : props.snapPoints}
+      showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
+      accessible={false}
+      {...props}
+      onChange={handleChange}
+    >
+      {loading ? <View style={styles.loadingTop} /> : null}
+      <BottomSheetScrollView contentContainerStyle={styles.container} ref={scrollViewRef}>
+        {content}
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};
+
+const styles = StyleSheet.create((theme, rt) => ({
+  container: {
+    flex: 1,
+    gap: theme.components.dialog.gap,
+    variants: {
+      loading: {
+        true: {
+          paddingTop: 0,
+        },
+      },
+    },
+  },
+  header: {
+    flexDirection: 'row',
+    gap: theme.components.dialog.gap,
+  },
+  headerTextContent: {
+    flex: 1,
+    gap: theme.components.dialog.content.gap,
+  },
+  image: {
+    width: 260,
+    height: 260,
+  },
+  imageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
+  textContent: {
+    gap: theme.components.dialog.content.gap,
+  },
+  loadingTop: {
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
+    height: 16,
+    backgroundColor: theme.color.surface.neutral.strong,
+  },
+  loadingContainer: {
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 140,
+    gap: theme.components.dialog.content.gap,
+  },
+  footer: {
+    gap: theme.components.dialog.action.gap,
+  },
+  fullscreenContainer: {
+    flex: 1,
+    ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
+  },
+  fullscreenContent: {
+    flex: 1,
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
+    backgroundColor: theme.color.surface.neutral.strong,
+    gap: theme.components.dialog.gap,
+    padding: theme.components.dialog.padding,
+    paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+  },
+  androidContainer: {
+    height: rt.insets.top + 18,
+    paddingLeft: theme.components.dialog.padding,
+    paddingRight: theme.components.dialog.padding,
+    justifyContent: 'flex-end',
+  },
+  pretendContent: {
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
+    height: 12,
+    backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
+  },
+}));
+
+export default Modal;