@utilitywarehouse/hearth-react-native 0.8.2 → 0.9.0

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

@@ -41,6 +41,12 @@ const meta = {
       control: 'boolean',
       description: 'Whether the modal is in a loading state.',
     },
+    fullscreen: {
+      control: 'boolean',
+      description: 'Whether the modal should take up the full screen height.',
+    },
+  },
+  actions: {
     onPressPrimaryButton: { action: () => null },
     onPressSecondaryButton: { action: () => null },
     onPressCloseButton: { action: () => null },
@@ -52,6 +58,7 @@ const meta = {
     primaryButtonText: 'Primary',
     secondaryButtonText: 'Cancel',
     loading: false,
+    fullscreen: false,
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
@@ -192,3 +199,42 @@ export const Loading = () => {
     </View>
   );
 };
+
+export const FullscreenModal: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 800 } : { flex: 1 }}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Fullscreen Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Fullscreen Modal Heading"
+            description="This is a fullscreen modal description"
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            fullscreen
+          >
+            <Box gap="200">
+              <BodyText>This is a fullscreen 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

@@ -37,11 +37,12 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  fullscreen = false,
   image,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +53,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +63,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +88,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +97,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -240,7 +241,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -248,18 +249,19 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
     <BottomSheetModal
       ref={bottomSheetModalRef}
       enableDynamicSizing={true}
-      snapPoints={image ? ['90%'] : props.snapPoints}
+      snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
       showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
       accessible={false}
+      style={styles.modal}
       {...props}
       onChange={handleChange}
     >
@@ -272,9 +274,12 @@ const Modal = ({
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
+  modal: {
+    gap: theme.components.modal.content.gap - theme.components.bottomSheet.gap,
+  },
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
     variants: {
       loading: {
         true: {
@@ -285,11 +290,11 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -297,52 +302,51 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   imageContainer: {
     alignItems: 'center',
-    justifyContent: 'center',
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingTop: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 16,
     backgroundColor: theme.color.surface.neutral.strong,
   },
   loadingContainer: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.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,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

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

@@ -41,7 +41,7 @@ const Modal = ({
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +52,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +62,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +87,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +96,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -238,7 +238,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -246,9 +246,9 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
@@ -271,15 +271,15 @@ const Modal = ({
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -291,40 +291,40 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingContainer: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.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,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

package/src/tokens/components/dark/index.ts

@@ -18,7 +18,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -41,6 +40,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -49,6 +49,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/src/tokens/components/dark/input.ts

@@ -22,6 +22,9 @@ export default {
   minWidth: 152,
   paddingHorizontal: 16,
   paddingVertical: 12,
+  stepper: {
+    gap: 4,
+  },
   textArea: {
     height: 96,
   },

package/src/tokens/components/dark/modal.ts

@@ -11,17 +11,20 @@ export default {
     gap: 12,
   },
   gap: 24,
-  padding: 48,
+  heading: {
+    gap: 24,
+  },
+  illustration: {
+    padding: 48,
+  },
+  padding: 24,
   mobile: {
-    padding: 16,
     width: 360,
   },
   tablet: {
-    padding: 48,
     width: 504,
   },
   desktop: {
-    padding: 48,
     width: 680,
   },
 } as const;

package/src/tokens/components/dark/rating.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderWidth: 2,
+  gap: 4,
+} as const;

package/src/tokens/components/dark/table.ts

@@ -14,9 +14,6 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
-    neutral: {
-      backgroundColor: '#30302c',
-    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/dark/time-picker.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 6,
+  gapContainer: 4,
+  minWidth: 288,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  time: {
+    columnGap: 4,
+    content: {
+      gap: 8,
+      item: {
+        gap: 2,
+      },
+    },
+    footer: {
+      gap: 8,
+    },
+    gap: 16,
+    item: {
+      height: 40,
+      width: 64,
+    },
+    rowGap: 2,
+  },
+} as const;

package/src/tokens/components/dark/timeline.ts

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  bar: {
+    width: 2,
+  },
+  content: {
+    gap: 8,
+    paddingBottom: 24,
+    paddingTop: 2,
+  },
+  gap: 12,
+  progress: {
+    circle: {
+      height: 24,
+      width: 24,
+    },
+  },
+  static: {
+    circle: {
+      height: 12,
+      width: 12,
+    },
+  },
+} as const;

package/src/tokens/components/light/index.ts

@@ -18,7 +18,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -41,6 +40,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -49,6 +49,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/src/tokens/components/light/input.ts

@@ -22,6 +22,9 @@ export default {
   minWidth: 120,
   paddingHorizontal: 16,
   paddingVertical: 12,
+  stepper: {
+    gap: 4,
+  },
   textArea: {
     height: 96,
   },

package/src/tokens/components/light/modal.ts

@@ -11,17 +11,20 @@ export default {
     gap: 12,
   },
   gap: 24,
-  padding: 16,
+  heading: {
+    gap: 24,
+  },
+  illustration: {
+    padding: 48,
+  },
+  padding: 24,
   mobile: {
-    padding: 16,
     width: 360,
   },
   tablet: {
-    padding: 48,
     width: 504,
   },
   desktop: {
-    padding: 48,
     width: 680,
   },
 } as const;

package/src/tokens/components/light/rating.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderWidth: 2,
+  gap: 4,
+} as const;

package/src/tokens/components/light/table.ts

@@ -14,9 +14,6 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
-    neutral: {
-      backgroundColor: '#f1efe4',
-    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/light/time-picker.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 6,
+  gapContainer: 4,
+  minWidth: 288,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  time: {
+    columnGap: 4,
+    content: {
+      gap: 8,
+      item: {
+        gap: 2,
+      },
+    },
+    footer: {
+      gap: 8,
+    },
+    gap: 16,
+    item: {
+      height: 40,
+      width: 64,
+    },
+    rowGap: 2,
+  },
+} as const;