@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -1,221 +0,0 @@
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useId, useLayoutEffect, useMemo } from 'react';
-import { Pressable, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-import { Skeleton } from '../../Skeleton';
-import { useListContext } from '../List.context';
-import { IListItemContext, ListItemContext } from './ListItem.context';
-import type ListItemProps from './ListItem.props';
-import ListItemContent from './ListItemContent';
-import ListItemHeading from './ListItemHeading';
-import ListItemHelperText from './ListItemHelperText';
-import ListItemLeadingContent from './ListItemLeadingContent';
-import ListItemTrailingContent from './ListItemTrailingContent';
-import ListItemTrailingIcon from './ListItemTrailingIcon';
-
-const ListItemRoot = ({
-  heading,
-  helperText,
-  leadingContent,
-  trailingContent,
-  disabled,
-  loading,
-  children,
-  states,
-  variant = 'subtle',
-  badge,
-  badgePosition = 'bottom',
-  numericValue,
-  truncateHeading = false,
-  truncateHelperText = false,
-  ...props
-}: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const { onPress } = props;
-  const listContext = useListContext();
-  const { registerItem, firstItemId } = listContext;
-  const { active } = states || { active: false };
-  const itemId = useId();
-
-  useLayoutEffect(() => {
-    if (!registerItem) {
-      return;
-    }
-
-    return registerItem(itemId);
-  }, [itemId, registerItem]);
-
-  const isFirstChild = firstItemId === itemId;
-
-  const getListContainer = (): ListItemProps['variant'] => {
-    if (listContext?.container?.includes('subtle')) {
-      return 'subtle';
-    }
-    if (listContext?.container?.includes('emphasis')) {
-      return 'emphasis';
-    }
-    return undefined;
-  };
-
-  const isLoading = loading || listContext?.loading;
-  const showPressed = isLoading ? false : !!onPress;
-  const isDisabled = disabled || listContext?.disabled || false;
-  const listItemVariant = getListContainer() || variant;
-
-  const testID = props.testID || 'list-item';
-  const loadingTestID = isLoading ? `${testID}-loading` : testID;
-
-  styles.useVariants({
-    variant: listItemVariant,
-    showPressed,
-    active,
-    disabled: isDisabled || isLoading,
-    showDisabled: !listContext.disabled && disabled,
-    isFirstChild,
-    container: listContext?.container,
-  });
-
-  const value: IListItemContext = useMemo(() => {
-    return {
-      showPressed,
-      active,
-      loading: isLoading,
-      disabled: isDisabled,
-    };
-  }, [active, showPressed, isLoading, isDisabled]);
-
-  if (loading || listContext?.loading) {
-    return (
-      <Pressable
-        {...props}
-        testID={loadingTestID}
-        style={[styles.container, props.style as ViewStyle]}
-        disabled={isDisabled}
-      >
-        {leadingContent ? <Skeleton width={24} height={24} /> : null}
-        <ListItemContent>
-          <Skeleton width="80%" height={20} />
-          <Skeleton width="100%" height={16} />
-        </ListItemContent>
-        {onPress || trailingContent ? <Skeleton width={24} height={24} /> : null}
-      </Pressable>
-    );
-  }
-
-  return (
-    <ListItemContext.Provider value={value}>
-      <Pressable
-        {...props}
-        testID={testID}
-        style={[styles.container, props.style as ViewStyle]}
-        disabled={isDisabled}
-        accessibilityRole={props.accessibilityRole ?? (onPress ? 'button' : undefined)}
-      >
-        {children ? (
-          children
-        ) : (
-          <>
-            {leadingContent ? (
-              <ListItemLeadingContent>{leadingContent}</ListItemLeadingContent>
-            ) : null}
-            <ListItemContent>
-              {badgePosition === 'top' && badge ? badge : null}
-              <ListItemHeading truncated={truncateHeading}>{heading}</ListItemHeading>
-              {helperText ? (
-                <ListItemHelperText truncated={truncateHelperText}>{helperText}</ListItemHelperText>
-              ) : null}
-              {badgePosition === 'bottom' && badge ? badge : null}
-            </ListItemContent>
-            {!!numericValue && <BodyText weight="semibold">{numericValue}</BodyText>}
-            {trailingContent ? (
-              <ListItemTrailingContent>{trailingContent}</ListItemTrailingContent>
-            ) : onPress ? (
-              <ListItemTrailingContent style={styles.centeredTrailingIcon}>
-                <ListItemTrailingIcon as={ChevronRightSmallIcon} />
-              </ListItemTrailingContent>
-            ) : null}
-          </>
-        )}
-      </Pressable>
-    </ListItemContext.Provider>
-  );
-};
-
-ListItemRoot.displayName = 'ListItemRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    paddingVertical: theme.components.list.item.functional.padding,
-    paddingHorizontal: theme.components.list.item.functional.padding,
-    flexDirection: 'row',
-    gap: theme.components.list.item.gap,
-    borderTopWidth: theme.borderWidth['1'],
-    borderStyle: 'solid',
-    variants: {
-      isFirstChild: {
-        true: {
-          borderTopWidth: 0,
-        },
-      },
-      variant: {
-        subtle: {
-          borderTopColor: theme.color.border.subtle,
-        },
-        emphasis: {
-          borderTopColor: theme.color.border.strong,
-        },
-      },
-      disabled: {
-        true: {
-          cursor: 'auto',
-        },
-      },
-      showDisabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-      showPressed: {
-        true: {
-          _web: {
-            _hover: {
-              backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
-            },
-            _active: {
-              backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-            },
-          },
-        },
-        false: {
-          cursor: 'auto',
-        },
-      },
-      active: {
-        true: {},
-      },
-      container: {
-        none: {
-          paddingHorizontal: 0,
-        },
-        subtleWhite: {},
-        emphasisWhite: {},
-        subtleWarmWhite: {},
-        emphasisWarmWhite: {},
-      },
-    },
-    compoundVariants: [
-      {
-        showPressed: true,
-        active: true,
-        styles: {
-          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-        },
-      },
-    ],
-  },
-  centeredTrailingIcon: {
-    justifyContent: 'center',
-  },
-}));
-
-export default ListItemRoot;

package/src/components/List/ListItem/ListItemTrailingContent.figma.tsx

@@ -1,27 +0,0 @@
-import React from "react"
-import ListItemTrailingContent from "./ListItemTrailingContent"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  ListItemTrailingContent,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9852%3A9858",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "icon20": figma.instance('Icon-20'),
-      // "variant": figma.enum('Variant', {
-      //   "Link": "link",
-      //   "Button": "button"
-      // })
-    },
-    example: (props) => <ListItemTrailingContent />,
-  },
-)

package/src/components/List/ListItem/ListItemTrailingContent.tsx

@@ -1,9 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-const ListItemTrailingContent = ({ children, ...props }: ViewProps) => (
-  <View {...props}>{children}</View>
-);
-
-ListItemTrailingContent.displayName = 'ListItemTrailingContent';
-
-export default ListItemTrailingContent;

package/src/components/List/ListItem/ListItemTrailingIcon.tsx

@@ -1,31 +0,0 @@
-import { ComponentType } from 'react';
-import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { Icon, IconProps } from '../../Icon';
-
-const ListItemTrailingIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
-  return (
-    <Icon
-      {...props}
-      style={
-        Platform.OS === 'web'
-          ? // @ts-expect-error - style prop type issue
-            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
-          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
-      }
-    >
-      {children}
-    </Icon>
-  );
-};
-
-ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    color: theme.color.icon.primary,
-  },
-}));
-
-export default ListItemTrailingIcon;

package/src/components/List/ListItem/index.ts

@@ -1,9 +0,0 @@
-export { default as ListItem } from './ListItem';
-export type { default as ListItemProps } from './ListItem.props';
-export { default as ListItemContent } from './ListItemContent';
-export { default as ListItemHeading, ListItemText } from './ListItemHeading';
-export { default as ListItemHelperText } from './ListItemHelperText';
-export { default as ListItemIcon } from './ListItemIcon';
-export { default as ListItemLeadingContent } from './ListItemLeadingContent';
-export { default as ListItemTrailingContent } from './ListItemTrailingContent';
-export { default as ListItemTrailingIcon } from './ListItemTrailingIcon';

package/src/components/List/index.ts

@@ -1,4 +0,0 @@
-export { default as List } from './List';
-export { useListContext } from './List.context';
-export * from './ListAction';
-export * from './ListItem';

package/src/components/Menu/Menu.context.ts

@@ -1,15 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface IMenuContext {
-  close: () => void;
-}
-
-export const MenuContext = createContext<IMenuContext | undefined>(undefined);
-
-export const useMenuContext = () => {
-  const context = useContext(MenuContext);
-  if (!context) {
-    throw new Error('useMenuContext must be used within a Menu component');
-  }
-  return context;
-};

package/src/components/Menu/Menu.figma.tsx

@@ -1,30 +0,0 @@
-import figma from '@figma/code-connect';
-import { useRef } from 'react';
-import { Button, Menu, MenuTrigger } from '../';
-
-figma.connect(Menu, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832', {
-  props: {
-    menuItems: figma.children('Menu Item'),
-    heading: figma.boolean('Heading?', {
-      true: figma.string('Heading'),
-    }),
-    showHandle: figma.boolean('Grabber?', {
-      true: true,
-    }),
-  },
-  example: props => {
-    const menuRef = useRef(null);
-
-    return (
-      <>
-        <MenuTrigger onPress={() => menuRef.current?.present()}>
-          <Button>Open Menu</Button>
-        </MenuTrigger>
-
-        <Menu ref={menuRef} heading={props.heading} showHandle={props.showHandle}>
-          {props.menuItems}
-        </Menu>
-      </>
-    );
-  },
-});

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

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-import { BottomSheetProps } from '../BottomSheet';
-
-export interface MenuMethods {
-  present: () => void;
-  dismiss: () => void;
-}
-
-export interface MenuProps extends BottomSheetProps {
-  /**
-   * Heading text displayed at the top of the menu
-   */
-  heading?: string;
-  /**
-   * Menu items to display
-   */
-  children: ReactNode;
-}
-
-export default MenuProps;

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

@@ -1,292 +0,0 @@
-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>
-  );
-};