@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/Menu/Menu.tsx

@@ -1,51 +0,0 @@
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { BottomSheetModal, 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, ...props }, 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} {...props}>
-      <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.figma.tsx

@@ -1,39 +0,0 @@
-import figma from '@figma/code-connect';
-import { MenuItem } from '../';
-
-figma.connect(
-  MenuItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3253-8193',
-  {
-    props: {
-      text: figma.string('Text'),
-      icon: figma.boolean('Icon left?', {
-        true: figma.instance('Icon left-20'),
-        false: figma.boolean('Icon right?', {
-          true: figma.instance('Icon right-20'),
-        }),
-      }),
-      iconPosition: figma.boolean('Icon left?', {
-        true: 'left',
-        false: figma.boolean('Icon right?', {
-          true: 'right',
-        }),
-      }),
-      colorScheme: figma.enum('Color Scheme', {
-        Destructive: 'destructive',
-      }),
-      disabled: figma.enum('State', {
-        Disabled: true,
-      }),
-    },
-    example: props => (
-      <MenuItem
-        text={props.text}
-        disabled={props.disabled}
-        colorScheme={props.colorScheme}
-        icon={props.icon}
-        iconPosition={props.iconPosition}
-      />
-    ),
-  }
-);

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

@@ -1,29 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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.figma.tsx

@@ -1,67 +0,0 @@
-import figma from '@figma/code-connect';
-import { useCallback, useRef } from 'react';
-import { BottomSheetModal, Button, Modal } from '../';
-
-figma.connect(
-  Modal,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6300-2825',
-  {
-    props: {
-      loading: figma.enum('State', {
-        Loading: true,
-      }),
-      heading: figma.string('Heading'),
-      description: figma.string('Description'),
-      fullscreen: figma.boolean('Full screen?'),
-      showHandle: figma.boolean('Handle?'),
-      customContent: figma.boolean('Custom content?', {
-        true: figma.instance('Custom content'),
-      }),
-      buttons: figma.boolean('Buttons?', {
-        true: figma.nestedProps('Button', {
-          primaryButtonText: figma.string('Text'),
-        }),
-      }),
-      close: figma.boolean('Close?'),
-      image: figma.boolean('Image?', {
-        true: figma.instance('Modal illustration'),
-      }),
-      loadingHeading: figma.string('Loading heading'),
-    },
-    example: props => {
-      const modalRef = useRef<BottomSheetModal>(null);
-
-      const handleOpenModal = useCallback(() => {
-        modalRef.current?.present();
-      }, []);
-
-      const handleCloseModal = useCallback(() => {
-        modalRef.current?.dismiss();
-      }, []);
-
-      return (
-        <>
-          <Button onPress={handleOpenModal}>Open Modal</Button>
-
-          <Modal
-            ref={modalRef}
-            heading={props.heading}
-            description={props.description}
-            loading={props.loading}
-            loadingHeading={props.loadingHeading}
-            showCloseButton={props.close}
-            fullscreen={props.fullscreen}
-            image={props.image}
-            showHandle={props.showHandle}
-            primaryButtonText={props.buttons.primaryButtonText}
-            secondaryButtonText={props.buttons.primaryButtonText}
-            onPressPrimaryButton={handleCloseModal}
-            onPressSecondaryButton={handleCloseModal}
-          >
-            {props.customContent}
-          </Modal>
-        </>
-      );
-    },
-  }
-);

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

@@ -1,25 +0,0 @@
-import { BottomSheetProps } from '../BottomSheet';
-import {
-  ModalButtonFooterProps,
-  ModalCommonBaseProps,
-  ModalCustomFooterProps,
-} from './Modal.shared.types';
-
-type ModalBaseProps = Omit<BottomSheetProps, 'children'> &
-  ModalCommonBaseProps & {
-    fullscreen?: boolean;
-  };
-
-type ModalProps =
-  | (ModalBaseProps &
-      ModalButtonFooterProps & {
-        closeOnPrimaryButtonPress?: boolean;
-        closeOnSecondaryButtonPress?: boolean;
-      })
-  | (ModalBaseProps &
-      ModalCustomFooterProps & {
-        closeOnPrimaryButtonPress?: never;
-        closeOnSecondaryButtonPress?: never;
-      });
-
-export default ModalProps;

package/src/components/Modal/Modal.shared.types.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { ButtonWithoutChildrenProps } from '../Button/Button.props';
-import { UnstyledIconButtonProps } from '../UnstyledIconButton';
-
-export interface ModalCommonBaseProps {
-  loading?: boolean;
-  image?: ReactNode;
-  showCloseButton?: boolean;
-  heading?: string;
-  loadingHeading?: string;
-  loadingDescription?: string;
-  description?: ReactNode;
-  stickyFooter?: boolean;
-  children?: ViewProps['children'];
-  onPressCloseButton?: () => void;
-  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
-}
-
-export interface ModalButtonFooterProps {
-  onPressPrimaryButton?: () => void;
-  primaryButtonText?: string;
-  onPressSecondaryButton?: () => void;
-  secondaryButtonText?: string;
-  primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  footer?: never;
-  footerStyle?: StyleProp<ViewStyle>;
-}
-
-export interface ModalCustomFooterProps {
-  footer: ReactNode;
-  footerStyle?: StyleProp<ViewStyle>;
-  onPressPrimaryButton?: never;
-  primaryButtonText?: never;
-  onPressSecondaryButton?: never;
-  secondaryButtonText?: never;
-  primaryButtonProps?: never;
-  secondaryButtonProps?: never;
-}
-
-export type ModalCommonProps = ModalCommonBaseProps &
-  (ModalButtonFooterProps | ModalCustomFooterProps);