@utilitywarehouse/hearth-react-native 0.1.0

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

@@ -0,0 +1,220 @@
+// /* eslint-disable react/jsx-no-undef */
+//
+// import { ListItem } from './';
+// import figma from '@figma/code-connect';
+
+// const props = {
+//   divider: figma.boolean('Divider?'),
+//   disabled: figma.enum('state', {
+//     disabled: true,
+//   }),
+//   loading: figma.enum('state', {
+//     loading: true,
+//   }),
+//   trailingIcon: figma.instance('Trailing Icon'),
+//   leadingIcon: figma.instance('Leading Icon'),
+//   text: figma.nestedProps('.Parts/List Item Text', {
+//     text: figma.string('list item text'),
+//     helperText: figma.string('Supporting Text'),
+//   }),
+// };
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     props: props,
+//     example: ({ disabled, divider, loading, text }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     variant: {
+//       'Trailing Icon?': true,
+//       'Trailing Icon': 'Chevron Right-01 - 24',
+//     },
+//     props,
+//     example: ({ disabled, divider, loading, text }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         onPress={() => console.log('list item pressed')}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     props: props,
+//     variant: {
+//       'Trailing Icon?': true,
+//     },
+//     example: ({ disabled, divider, loading, text, trailingIcon }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         trailingContent={trailingIcon}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     props: props,
+//     variant: {
+//       'Trailing Icon?': true,
+//       'Leading Icon?': true,
+//       'Trailing Icon': 'Chevron Right-01 - 24',
+//     },
+//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         leadingContent={leadingIcon}
+//         onPress={() => console.log('list item pressed')}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     props: props,
+//     variant: {
+//       'Trailing Icon?': true,
+//       'Leading Icon?': true,
+//     },
+//     example: ({ disabled, divider, loading, text, trailingIcon, leadingIcon }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         leadingContent={leadingIcon}
+//         trailingContent={trailingIcon}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     props: props,
+//     variant: {
+//       'Leading Icon?': true,
+//     },
+//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         leadingContent={leadingIcon}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     variant: {
+//       _content: 'toggle',
+//       'Trailing Icon?': true,
+//       'Leading Icon?': true,
+//     },
+//     props,
+//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
+//       // Toggle doesn't exist in native-ui yet
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         leadingContent={leadingIcon}
+//         trailingContent={<Toggle />}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     variant: {
+//       _content: 'toggle',
+//       'Leading Icon?': true,
+//     },
+//     props,
+//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
+//       // Toggle doesn't exist in native-ui yet
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         leadingContent={leadingIcon}
+//         trailingContent={<Toggle />}
+//       />
+//     ),
+//   }
+// );
+
+// figma.connect(
+//   ListItem,
+//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
+//   {
+//     variant: {
+//       _content: 'toggle',
+//       'Leading Icon?': false,
+//     },
+//     props,
+//     example: ({ disabled, divider, loading, text }) => (
+//       // Toggle doesn't exist in native-ui yet
+//       <ListItem
+//         text={text.text}
+//         helperText={text.helperText}
+//         disabled={disabled}
+//         divider={divider}
+//         loading={loading}
+//         trailingContent={<Toggle />}
+//       />
+//     ),
+//   }
+// );

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

@@ -0,0 +1,31 @@
+import type { PressableProps, ViewProps } from 'react-native';
+import type { ColorValue } from '../../../types';
+
+interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
+  divider?: boolean;
+  dividerColor?: ColorValue;
+  loading?: boolean;
+  disabled?: boolean;
+  variant?: 'subtle' | 'emphasis';
+  isFirst?: boolean;
+}
+
+export interface ListItemWithChildren extends ListItemBaseProps {
+  children: ViewProps['children'];
+  text?: never;
+  helperText?: never;
+  leadingContent?: never;
+  trailingContent?: never;
+}
+
+export interface ListItemWithoutChildren extends ListItemBaseProps {
+  children?: never;
+  text: string;
+  helperText?: string;
+  leadingContent?: ViewProps['children'];
+  trailingContent?: ViewProps['children'];
+}
+
+type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;
+
+export default ListItemProps;

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

@@ -0,0 +1,10 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import ListItemRoot from './ListItemRoot';
+
+const ListItem = createPressable({
+  Root: ListItemRoot,
+});
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;

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

@@ -0,0 +1,21 @@
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const ListItemContent = ({ children, ...props }: ViewProps) => {
+  return (
+    <View {...props} style={[styles.container, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+ListItemContent.displayName = 'ListItemContent';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.components.list.item.contentGap,
+    flex: 1,
+  },
+}));
+
+export default ListItemContent;

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

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

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

@@ -0,0 +1,31 @@
+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 ListItemIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+ListItemIcon.displayName = 'ListItemIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.components.icon.color,
+    width: 24,
+    height: 24,
+  },
+}));
+
+export default ListItemIcon;

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

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

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

@@ -0,0 +1,193 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useMemo } from 'react';
+import { Pressable, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+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 ListItemHelperText from './ListItemHelperText';
+import ListItemLeadingContent from './ListItemLeadingContent';
+import ListItemText from './ListItemText';
+import ListItemTrailingContent from './ListItemTrailingContent';
+import ListItemTrailingIcon from './ListItemTrailingIcon';
+
+const ListItemRoot = ({
+  text,
+  helperText,
+  leadingContent,
+  trailingContent,
+  disabled,
+  divider,
+  loading,
+  children,
+  states,
+  variant = 'subtle',
+  ...props
+}: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { onPress } = props;
+  const listContext = useListContext();
+  const { active } = states || { active: false };
+
+  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 showDivider = listContext?.divider ?? divider;
+  const isDisabled = disabled || listContext?.disabled || false;
+  const listItemVariant = getListContainer() || variant;
+
+  const testID = props.testID || 'list-item';
+  const loadingTestID = isLoading ? `${testID}-loading` : testID;
+
+  styles.useVariants({
+    divider: showDivider,
+    variant: listItemVariant,
+    showPressed,
+    active,
+    disabled: isDisabled || isLoading,
+    showDisabled: !listContext?.disabled && disabled,
+    isFirstChild: props.isFirst,
+    container: listContext?.container,
+  });
+
+  const value: IListItemContext = useMemo(() => {
+    return {
+      showPressed,
+      divider: showDivider,
+      active,
+      loading: isLoading,
+      disabled: isDisabled,
+    };
+  }, [active, showPressed, showDivider, 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}
+      >
+        {children ? (
+          children
+        ) : (
+          <>
+            {leadingContent ? (
+              <ListItemLeadingContent>{leadingContent}</ListItemLeadingContent>
+            ) : null}
+            <ListItemContent>
+              <ListItemText>{text}</ListItemText>
+              {helperText ? <ListItemHelperText>{helperText}</ListItemHelperText> : null}
+            </ListItemContent>
+            {trailingContent ? (
+              <ListItemTrailingContent>{trailingContent}</ListItemTrailingContent>
+            ) : onPress ? (
+              <ListItemTrailingContent>
+                <ListItemTrailingIcon as={ChevronRightSmallIcon} />
+              </ListItemTrailingContent>
+            ) : null}
+          </>
+        )}
+      </Pressable>
+    </ListItemContext.Provider>
+  );
+};
+
+ListItemRoot.displayName = 'ListItemRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    paddingVertical: theme.components.list.item.padding,
+    paddingHorizontal: theme.components.list.item.padding,
+    flexDirection: 'row',
+    gap: theme.components.list.item.gap,
+    variants: {
+      divider: {
+        true: {
+          borderTopWidth: theme.borderWidth['1'],
+          borderStyle: 'solid',
+        },
+      },
+      isFirstChild: {
+        true: {
+          borderTopWidth: 0,
+        },
+      },
+      variant: {
+        subtle: {
+          borderTopColor: theme.components.list.item.subtle.borderColor,
+        },
+        emphasis: {
+          borderTopColor: theme.components.list.item.emphasis.borderColor,
+        },
+      },
+      disabled: {
+        true: {
+          cursor: 'auto',
+        },
+      },
+      showDisabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      showPressed: {
+        true: {},
+        false: {
+          cursor: 'auto',
+        },
+      },
+      active: {
+        true: {},
+      },
+      container: {
+        none: {
+          paddingHorizontal: 0,
+        },
+        subtleWhite: {},
+        emphasisWhite: {},
+        subtleWarmWhite: {},
+        emphasisWarmWhite: {},
+      },
+    },
+    compoundVariants: [
+      {
+        showPressed: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.components.list.item.backgroundColorActive,
+        },
+      },
+    ],
+  },
+}));
+
+export default ListItemRoot;

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

@@ -0,0 +1,14 @@
+import { TextProps } from 'react-native';
+import { BodyText } from '../../BodyText';
+
+const ListItemText = ({ children, ...props }: TextProps) => {
+  return (
+    <BodyText size="lg" {...props}>
+      {children}
+    </BodyText>
+  );
+};
+
+ListItemText.displayName = 'ListItemText';
+
+export default ListItemText;

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

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

@@ -0,0 +1,32 @@
+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'
+          ? StyleSheet.compose(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.components.icon.color,
+    width: 24,
+    height: 24,
+  },
+}));
+
+export default ListItemTrailingIcon;

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

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

package/src/components/List/index.ts

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

package/src/components/Radio/Radio.context.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export const RadioContext = createContext<{
+  disabled?: boolean;
+  checked?: boolean;
+  active?: boolean;
+}>({});
+
+export const useRadioContext = () => useContext(RadioContext);