@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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

@@ -0,0 +1,333 @@
+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();
+    }
+  };
+
+  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}
+    >
+      <BottomSheetScrollView contentContainerStyle={styles.container} ref={scrollViewRef}>
+        {content}
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};
+
+const styles = StyleSheet.create((theme, rt) => ({
+  container: {
+    flex: 1,
+    gap: theme.components.dialog.gap,
+  },
+  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,
+  },
+  loadingContainer: {
+    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;

package/src/components/Modal/index.ts

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

package/src/components/Radio/RadioIndicator.tsx

@@ -22,8 +22,8 @@ const styles = StyleSheet.create(theme => ({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.components.radio.unchecked.backgroundColor,
-    borderColor: theme.components.radio.unchecked.borderColor,
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderColor: theme.color.border.strong,
     borderWidth: theme.components.radio.borderWidth,
     borderRadius: theme.components.radio.borderRadius,
     width: 24,

package/src/components/Radio/RadioTileRoot.tsx

@@ -19,14 +19,14 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.radio.gap,
     padding: theme.components.radio.tile.padding,
     borderWidth: theme.components.radio.tile.borderWidth,
-    borderColor: theme.components.radio.tile.borderColor,
+    borderColor: theme.color.border.subtle,
     borderRadius: theme.components.radio.tile.borderRadius,
-    backgroundColor: theme.components.radio.tile.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     variants: {
       checked: {
         true: {
           borderWidth: theme.components.radio.tile.borderWidthSelected,
-          borderColor: theme.components.radio.tile.borderColorSelected,
+          borderColor: theme.color.border.strong,
           margin: -theme.components.radio.tile.borderWidthSelected / 2,
         },
       },

package/src/components/RadioCard/RadioCardIndicator.tsx

@@ -22,8 +22,8 @@ const styles = StyleSheet.create(theme => ({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.components.radio.unchecked.backgroundColor,
-    borderColor: theme.components.radio.unchecked.borderColor,
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderColor: theme.color.border.strong,
     borderWidth: theme.components.radio.borderWidth,
     borderRadius: theme.components.radio.borderRadius,
     width: 24,

package/src/components/RadioCard/RadioCardRoot.tsx

@@ -41,9 +41,9 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'column',
     gap: theme.components.card.selectable.gap,
     borderRadius: theme.components.card.borderRadius,
-    backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     borderWidth: theme.components.card.selectable.borderWidth,
-    borderColor: theme.components.card.selectable.borderColor,
+    borderColor: theme.color.border.subtle,
     alignSelf: 'stretch',
     padding: {
       base: theme.components.card.mobile.padding,
@@ -54,7 +54,7 @@ const styles = StyleSheet.create(theme => ({
       selected: {
         true: {
           borderWidth: theme.components.card.selectable.borderWidthSelected,
-          borderColor: theme.components.card.selectable.borderColorSelected,
+          borderColor: theme.color.border.strong,
           margin: -theme.components.card.selectable.borderWidthSelected / 2,
         },
       },

package/src/components/{List/ListHeading/ListHeading.figma.tsx → SectionHeader/SectionHeader.figma.tsx}

@@ -1,9 +1,9 @@
 //
-// import { ListHeading } from './';
+// import { SectionHeader } from './';
 // import figma from '@figma/code-connect';
 
 // figma.connect(
-//   ListHeading,
+//   SectionHeader,
 //   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4763-8266&t=q4qCzh74a2av1MqM-4',
 //   {
 //     props: {
@@ -11,7 +11,7 @@
 //       text: figma.string('heading'),
 //     },
 //     example: ({ helperText, text }) => (
-//       <ListHeading text={text} helperText={helperText} />
+//       <SectionHeader text={text} helperText={helperText} />
 //     ),
 //   }
 // );

package/src/components/{List/ListHeading/ListHeading.props.ts → SectionHeader/SectionHeader.props.ts}

@@ -1,38 +1,36 @@
 import { ComponentType, Ref } from 'react';
 import type { ViewProps, View } from 'react-native';
 
-interface ListHeadingBaseProps extends Omit<ViewProps, 'children'> {
+interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
   ref?: Ref<View>;
 }
 
-export interface ListHeadingWithChildren extends ListHeadingBaseProps {
+export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
   children: ViewProps['children'];
-  text?: never;
+  heading?: never;
   helperText?: never;
   linkText?: never;
   linkHref?: never;
   linkOnPress?: never;
   linkTarget?: never;
-  linkDisabled?: never;
   linkIcon?: never;
   linkIconPosition?: never;
   linkShowIcon?: never;
 }
 
-export interface ListHeadingWithoutChildren extends ListHeadingBaseProps {
+export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
   children?: never;
-  text: string;
+  heading: string;
   helperText?: string;
   linkText?: string;
   linkHref?: string;
   linkOnPress?: () => void;
   linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  linkDisabled?: boolean;
   linkIcon?: ComponentType;
   linkIconPosition?: 'left' | 'right';
   linkShowIcon?: boolean;
 }
 
-type ListHeadingProps = ListHeadingWithChildren | ListHeadingWithoutChildren;
+type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;
 
-export default ListHeadingProps;
+export default SectionHeaderProps;

package/src/components/SectionHeader/SectionHeader.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SettingsMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
+import SectionHeader from './SectionHeader';
+
+const meta = {
+  title: 'Stories / SectionHeader',
+  component: SectionHeader,
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'The heading text to be displayed.',
+    },
+    helperText: {
+      control: 'text',
+      description: 'The heading supporting text to be displayed.',
+    },
+    linkText: {
+      control: 'text',
+      description: 'Link text to display',
+    },
+  },
+  args: {
+    heading: 'This is the section heading',
+    helperText: 'Helper text',
+    linkText: 'See more',
+  },
+} satisfies Meta<typeof SectionHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => {
+    return (
+      <SectionHeader
+        heading="This is the section heading"
+        helperText="Helper text"
+        linkText="See more"
+      />
+    );
+  },
+};
+
+export const KitchenSink: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    return (
+      <Flex space="xl" direction="column" style={{ width: '100%' }}>
+        <VariantTitle title="Default SectionHeader with helper text and link">
+          <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with icon on the left of the link ">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            linkText="Settings"
+            linkIcon={SettingsMediumIcon}
+            linkIconPosition="left"
+          />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with no icon">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            linkText="Call to action"
+            linkShowIcon={false}
+          />
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};

package/src/components/{List/ListHeading/ListHeading.tsx → SectionHeader/SectionHeader.tsx}

@@ -1,18 +1,16 @@
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import ListHeadingTitle from './ListHeadingTitle';
-import ListHeadingHelperText from './ListHeadingHelperText';
-import ListHeadingProps from './ListHeading.props';
-import ListHeadingTextContent from './ListHeadingTextContent';
-import { Link } from '../../Link';
-import { useListContext } from '../List.context';
+import { Link } from '../Link';
+import SectionHeaderProps from './SectionHeader.props';
+import SectionHeaderTitle from './SectionHeaderHeading';
+import SectionHeaderHelperText from './SectionHeaderHelperText';
+import SectionHeaderTextContent from './SectionHeaderTextContent';
 
-const ListHeading = ({
-  text,
+const SectionHeader = ({
+  heading,
   helperText,
   children,
   style,
-  linkDisabled,
   linkHref,
   linkIcon,
   linkIconPosition,
@@ -21,22 +19,20 @@ const ListHeading = ({
   linkTarget,
   linkText,
   ...props
-}: ListHeadingProps) => {
-  const { disabled } = useListContext();
+}: SectionHeaderProps) => {
   return (
     <View {...props} style={[styles.container, style]}>
       {children ? (
         children
       ) : (
         <>
-          <ListHeadingTextContent>
-            <ListHeadingTitle>{text}</ListHeadingTitle>
-            {!!helperText && <ListHeadingHelperText>{helperText}</ListHeadingHelperText>}
-          </ListHeadingTextContent>
+          <SectionHeaderTextContent>
+            <SectionHeaderTitle>{heading}</SectionHeaderTitle>
+            {!!helperText && <SectionHeaderHelperText>{helperText}</SectionHeaderHelperText>}
+          </SectionHeaderTextContent>
           {!!linkText && (
             <Link
               href={linkHref}
-              disabled={disabled ?? linkDisabled}
               onPress={linkOnPress}
               icon={linkIcon}
               showIcon={linkShowIcon}
@@ -52,13 +48,14 @@ const ListHeading = ({
   );
 };
 
-ListHeading.displayName = 'ListHeading';
+SectionHeader.displayName = 'SectionHeader';
 
 const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
-    gap: theme.components.list.heading.gap,
+    gap: theme.components.sectionHeader.gap,
+    alignItems: 'flex-start',
   },
 }));
 
-export default ListHeading;
+export default SectionHeader;

package/src/components/SectionHeader/SectionHeaderHeading.tsx

@@ -0,0 +1,14 @@
+import { Heading } from '../Heading';
+import HeadingProps from '../Heading/Heading.props';
+
+const SectionHeaderHeading = ({ children, ...props }: HeadingProps) => {
+  return (
+    <Heading size="md" {...props}>
+      {children}
+    </Heading>
+  );
+};
+
+SectionHeaderHeading.displayName = 'SectionHeaderHeading';
+
+export default SectionHeaderHeading;

package/src/components/SectionHeader/SectionHeaderHelperText.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import TextProps from '../BodyText/BodyText.props';
+
+const SectionHeaderHelperText = ({ children, ...props }: TextProps) => {
+  return (
+    <BodyText size="md" {...props} style={[styles.helperText, props.style]}>
+      {children}
+    </BodyText>
+  );
+};
+
+SectionHeaderHelperText.displayName = 'SectionHeaderHelperText';
+
+const styles = StyleSheet.create(theme => ({
+  helperText: {
+    color: theme.color.text.secondary,
+  },
+}));
+
+export default SectionHeaderHelperText;

package/src/components/{List/ListHeading/ListHeadingTextContent.tsx → SectionHeader/SectionHeaderTextContent.tsx}

@@ -1,7 +1,7 @@
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-const ListHeadingTextContent = ({ children, ...props }: ViewProps) => {
+const SectionHeaderTextContent = ({ children, ...props }: ViewProps) => {
   return (
     <View {...props} style={[styles.container, props.style]}>
       {children}
@@ -9,13 +9,13 @@ const ListHeadingTextContent = ({ children, ...props }: ViewProps) => {
   );
 };
 
-ListHeadingTextContent.displayName = 'ListHeadingTextContent';
+SectionHeaderTextContent.displayName = 'SectionHeaderTextContent';
 
 const styles = StyleSheet.create(theme => ({
   container: {
-    gap: theme.components.list.heading.textContentGap,
+    gap: theme.components.sectionHeader.textContent.gap,
     flex: 1,
   },
 }));
 
-export default ListHeadingTextContent;
+export default SectionHeaderTextContent;