@utilitywarehouse/hearth-react-native 0.8.2 → 0.9.0

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,292 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import {
+  DownloadSmallIcon,
+  EditSmallIcon,
+  SettingsMediumIcon,
+  ShareSmallIcon,
+  TickSmallIcon,
+  TrashSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { useRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Button } from '../Button';
+import { Menu, MenuItem, MenuTrigger } from './';
+import type { MenuMethods } from './Menu.props';
+
+import { ViewWrap } from '../../../docs/components';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Stories / Menu',
+  component: Menu,
+  parameters: {
+    layout: 'centered',
+    noScroll: true,
+  },
+  argTypes: {},
+  args: {
+    heading: 'Menu Options',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => {
+    const menuRef = useRef<MenuMethods>(null);
+
+    const openMenu = () => {
+      menuRef.current?.present();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : { flex: 1 }}>
+        <ViewWrap>
+          <MenuTrigger onPress={openMenu}>
+            <Button>Open Menu</Button>
+          </MenuTrigger>
+
+          <Menu ref={menuRef} {...args}>
+            <MenuItem
+              icon={EditSmallIcon}
+              text="Edit"
+              onPress={() => console.log('Edit pressed')}
+            />
+            <MenuItem
+              icon={ShareSmallIcon}
+              text="Share"
+              onPress={() => console.log('Share pressed')}
+            />
+            <MenuItem
+              icon={DownloadSmallIcon}
+              text="Download"
+              onPress={() => console.log('Download pressed')}
+            />
+            <MenuItem
+              icon={TrashSmallIcon}
+              text="Delete"
+              colorScheme="destructive"
+              onPress={() => console.log('Delete pressed')}
+            />
+          </Menu>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const BasicMenu = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : { flex: 1 }}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>Actions</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef} heading="Actions">
+          <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit pressed')} />
+          <MenuItem
+            icon={ShareSmallIcon}
+            text="Share"
+            onPress={() => console.log('Share pressed')}
+          />
+          <MenuItem
+            icon={DownloadSmallIcon}
+            text="Download"
+            onPress={() => console.log('Download pressed')}
+          />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const WithDestructiveAction = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>File Options</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef} heading="File Options">
+          <MenuItem
+            icon={EditSmallIcon}
+            text="Rename"
+            onPress={() => console.log('Rename pressed')}
+          />
+          <MenuItem
+            icon={ShareSmallIcon}
+            text="Share"
+            onPress={() => console.log('Share pressed')}
+          />
+          <MenuItem
+            icon={DownloadSmallIcon}
+            text="Download"
+            onPress={() => console.log('Download pressed')}
+          />
+          <MenuItem
+            icon={TrashSmallIcon}
+            text="Delete"
+            colorScheme="destructive"
+            onPress={() => console.log('Delete pressed')}
+          />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const IconOnRight = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>Settings</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef} heading="Settings">
+          <MenuItem
+            icon={TickSmallIcon}
+            iconPosition="right"
+            text="Enable Notifications"
+            onPress={() => console.log('Toggle notifications')}
+          />
+          <MenuItem
+            icon={TickSmallIcon}
+            iconPosition="right"
+            text="Dark Mode"
+            onPress={() => console.log('Toggle dark mode')}
+          />
+          <MenuItem
+            icon={SettingsMediumIcon}
+            iconPosition="right"
+            text="Advanced Settings"
+            onPress={() => console.log('Open advanced settings')}
+          />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const WithoutIcons = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>Sort By</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef} heading="Sort By">
+          <MenuItem text="Name" onPress={() => console.log('Sort by name')} />
+          <MenuItem text="Date" onPress={() => console.log('Sort by date')} />
+          <MenuItem text="Size" onPress={() => console.log('Sort by size')} />
+          <MenuItem text="Type" onPress={() => console.log('Sort by type')} />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const WithDisabledItems = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>Document Actions</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef} heading="Document Actions">
+          <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit pressed')} />
+          <MenuItem
+            icon={ShareSmallIcon}
+            text="Share"
+            disabled
+            onPress={() => console.log('Share pressed')}
+          />
+          <MenuItem
+            icon={DownloadSmallIcon}
+            text="Download"
+            disabled
+            onPress={() => console.log('Download pressed')}
+          />
+          <MenuItem
+            icon={TrashSmallIcon}
+            text="Delete"
+            colorScheme="destructive"
+            onPress={() => console.log('Delete pressed')}
+          />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};
+
+export const WithoutHeading = () => {
+  const menuRef = useRef<MenuMethods>(null);
+
+  const openMenu = () => {
+    menuRef.current?.present();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <MenuTrigger onPress={openMenu}>
+          <Button>Quick Actions</Button>
+        </MenuTrigger>
+
+        <Menu ref={menuRef}>
+          <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit pressed')} />
+          <MenuItem
+            icon={ShareSmallIcon}
+            text="Share"
+            onPress={() => console.log('Share pressed')}
+          />
+          <MenuItem
+            icon={DownloadSmallIcon}
+            text="Download"
+            onPress={() => console.log('Download pressed')}
+          />
+          <MenuItem
+            icon={TrashSmallIcon}
+            text="Delete"
+            colorScheme="destructive"
+            onPress={() => console.log('Delete pressed')}
+          />
+        </Menu>
+      </ViewWrap>
+    </View>
+  );
+};

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetProps, BottomSheetScrollView } from '../BottomSheet';
+import { MenuContext } from './Menu.context';
+import type MenuProps from './Menu.props';
+import type { MenuMethods } from './Menu.props';
+
+const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, bottomSheetProps }, ref) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      present: () => bottomSheetModalRef.current?.present(),
+      dismiss: () => bottomSheetModalRef.current?.dismiss(),
+    }),
+    []
+  );
+
+  const handleClose = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  const contextValue = useMemo(() => ({ close: handleClose }), [handleClose]);
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      {...(bottomSheetProps as Partial<BottomSheetProps>)}
+    >
+      <BottomSheetScrollView contentContainerStyle={styles.container}>
+        <MenuContext.Provider value={contextValue}>
+          {heading && (
+            <BodyText size="md" weight="semibold">
+              {heading}
+            </BodyText>
+          )}
+          {children}
+        </MenuContext.Provider>
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+});
+
+Menu.displayName = 'Menu';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.components.bottomSheet.gap,
+  },
+}));
+
+export default Menu;

package/src/components/Menu/MenuItem.props.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+
+export interface MenuItemProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Icon component to display
+   */
+  icon?: ComponentType;
+  /**
+   * Position of the icon
+   * @default 'left'
+   */
+  iconPosition?: 'left' | 'right';
+  /**
+   * Text to display in the menu item
+   */
+  text: string;
+  /**
+   * Color scheme for the menu item
+   * @default 'functional'
+   */
+  colorScheme?: 'functional' | 'destructive';
+  /**
+   * Whether the menu item is disabled
+   */
+  disabled?: boolean;
+}
+
+export default MenuItemProps;

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,145 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useMenuContext } from './Menu.context';
+import type MenuItemProps from './MenuItem.props';
+
+const MenuItemRoot = ({
+  icon,
+  iconPosition = 'left',
+  text,
+  colorScheme = 'functional',
+  disabled = false,
+  onPress,
+  states = {},
+  ...props
+}: MenuItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { active } = states;
+  const { close } = useMenuContext();
+
+  styles.useVariants({ colorScheme, disabled, iconPosition, active });
+
+  const handlePress = (event: any) => {
+    if (disabled) return;
+    onPress?.(event);
+    close();
+  };
+
+  return (
+    <Pressable
+      {...props}
+      onPress={handlePress}
+      disabled={disabled}
+      style={styles.container}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      {!!icon && <Icon as={icon} style={styles.icon} />}
+      <BodyText size="lg" style={styles.text}>
+        {text}
+      </BodyText>
+    </Pressable>
+  );
+};
+
+const MenuItem = createPressable({ Root: MenuItemRoot });
+
+MenuItem.displayName = 'MenuItem';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.components.menu.item.padding,
+    paddingHorizontal: theme.components.menu.mobile.item.padding,
+    gap: theme.components.menu.item.gap,
+    borderRadius: theme.components.menu.item.borderRadius,
+    variants: {
+      active: {
+        true: {
+          backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+          cursor: 'auto',
+        },
+        false: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+            _active: {
+              backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+            },
+          },
+        },
+      },
+      iconPosition: {
+        left: {
+          flexDirection: 'row',
+        },
+        right: {
+          flexDirection: 'row-reverse',
+        },
+      },
+      colorScheme: {
+        functional: {},
+        destructive: {},
+      },
+    },
+    compoundVariants: [
+      {
+        colorScheme: 'destructive',
+        active: true,
+        styles: {
+          backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+        },
+      },
+      {
+        colorScheme: 'destructive',
+        disabled: false,
+        styles: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
+            },
+            _active: {
+              backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+            },
+          },
+        },
+      },
+    ],
+  },
+  text: {
+    flex: 1,
+    variants: {
+      colorScheme: {
+        functional: {
+          color: theme.color.text.primary,
+        },
+        destructive: {
+          color: theme.color.interactive.destructive.foreground.subtle,
+        },
+      },
+    },
+  },
+  icon: {
+    variants: {
+      colorScheme: {
+        functional: {
+          color: theme.color.icon.primary,
+        },
+        destructive: {
+          color: theme.color.interactive.destructive.foreground.subtle,
+        },
+      },
+    },
+  },
+}));
+
+export default MenuItem;

package/src/components/Menu/MenuTrigger.props.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+
+export interface MenuTriggerProps {
+  /**
+   * The child element that triggers the menu (should be a single pressable element like Button)
+   */
+  children: ReactElement;
+  /**
+   * Called when the trigger is pressed.
+   */
+  onPress?: () => void;
+}
+
+export default MenuTriggerProps;

package/src/components/Menu/MenuTrigger.tsx

@@ -0,0 +1,20 @@
+import { cloneElement, isValidElement } from 'react';
+import type MenuTriggerProps from './MenuTrigger.props';
+
+interface MenuTriggerInternalProps extends MenuTriggerProps {
+  onPress: () => void;
+}
+
+const MenuTrigger = ({ children, onPress }: MenuTriggerInternalProps) => {
+  if (!isValidElement(children)) {
+    throw new Error('MenuTrigger: children must be a valid React element');
+  }
+
+  return cloneElement(children, {
+    onPress,
+  } as { onPress?: () => void });
+};
+
+MenuTrigger.displayName = 'MenuTrigger';
+
+export default MenuTrigger;

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export type { MenuMethods, default as MenuProps } from './Menu.props';
+export { default as MenuItem } from './MenuItem';
+export type { default as MenuItemProps } from './MenuItem.props';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { default as MenuTriggerProps } from './MenuTrigger.props';

package/src/components/Modal/Modal.docs.mdx

@@ -25,11 +25,12 @@ The Modal component is ideal for displaying important information, collecting us
 - [Examples](#examples)
   - [Basic Modal](#basic-modal)
   - [Modal with Image](#modal-with-image)
+  - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
-  - [Fullscreen Modal (Usage with navigation modal)](#fullscreen-modal-usage-with-navigation-modal)
+  - [Modal in Navigation Modal](#modal-in-navigation-modal)
 - [Integration Notes](#integration-notes)
 - [External Resources](#external-resources)
 
@@ -104,7 +105,8 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`    | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height (useful for navigation modals)                        | `false` |
+| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height                                                       | `false` |
+| `inNavModal`                  | `boolean`                                      | Renders the modal correctly when used inside a navigation modal                                               | `false` |
 
 ## Features
 
@@ -292,6 +294,33 @@ const ImageModal = () => {
 };
 ```
 
+### Fullscreen Modal
+
+Create a modal that takes up the full screen height:
+
+<Canvas of={Stories.FullscreenModal} />
+
+```tsx
+const FullscreenModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Fullscreen Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Fullscreen Modal"
+        description="This modal takes up the full screen height"
+        primaryButtonText="Close"
+        onPressPrimaryButton={() => modalRef.current?.dismiss()}
+        fullscreen
+      />
+    </>
+  );
+};
+```
+
 ### Modal with Custom Content
 
 Add custom content between the header and footer sections:
@@ -414,9 +443,9 @@ const AlertModal = () => {
 };
 ```
 
-### Fullscreen Modal (Usage with navigation modal)
+### Modal In Navigation Modal
 
-When using the Modal component in a navigation context, you can set it to fullscreen mode, this will make it behave like a standard modal screen.
+When using the Modal component in a navigation context, you can set it to `inNavModal` mode, this will make it behave like a standard modal screen.
 Here's an example of how to implement this with custom close animations for Android:
 
 ```tsx
@@ -465,7 +494,7 @@ export default function ModalScreen() {
   return (
     <Modal
       ref={modalRef}
-      fullscreen
+      inNavModal
       onPressCloseButton={handleClose}
       primaryButtonText="Action"
       onPressPrimaryButton={handleClose}

package/src/components/Modal/Modal.props.ts

@@ -9,6 +9,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   showCloseButton?: boolean;
   heading?: string;
   description?: string;
+  inNavModal?: boolean;
   fullscreen?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;