@utilitywarehouse/hearth-react-native 0.6.0 → 0.7.0

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -0,0 +1,265 @@
+import { Meta, StoryObj } from '@storybook/react';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View } from 'react-native';
+import { Flex } from '../../Flex';
+import Card from '../Card';
+import CardAction from './CardAction';
+
+const meta: Meta<typeof CardAction> = {
+  title: 'Stories / CardAction',
+  component: CardAction,
+  argTypes: {
+    heading: { control: 'text' },
+    helperText: { control: 'text' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+    },
+    badge: { control: 'object' },
+    badgePosition: {
+      control: 'select',
+      options: ['bottom', 'middle', 'right'],
+    },
+    leadingIcon: {
+      options: [
+        'none',
+        ...Object.keys(Icons).filter(icon => icon.includes('Small') || icon.includes('Medium')),
+      ],
+      control: 'select',
+      description: 'The leading icon.',
+    },
+    trailingIcon: {
+      options: [
+        'none',
+        ...Object.keys(Icons).filter(icon => icon.includes('Small') || icon.includes('Medium')),
+      ],
+      control: 'select',
+      description: 'The trailing icon.',
+    },
+    iconContainer: { control: 'boolean' },
+    iconContainerVariant: {
+      control: 'select',
+      options: ['subtle', 'emphasis'],
+    },
+    iconContainerColor: {
+      control: 'select',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+    },
+  },
+  args: {
+    heading: 'Card Action',
+    helperText: 'This is a card action component',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    iconContainer: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardAction>;
+
+export const Playground: Story = {
+  args: {
+    onPress: () => console.log('pressed'),
+  },
+  render: (args: any) => {
+    // @ts-expect-error - This is a playground
+    const leadingIcon = args.leadingIcon === 'none' ? undefined : Icons[args.leadingIcon];
+    // @ts-expect-error - This is a playground
+    const trailingIcon = args.trailingIcon === 'none' ? undefined : Icons[args.trailingIcon];
+    return (
+      <View style={{ width: '100%', maxWidth: 400 }}>
+        <Card variant="emphasis">
+          <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+        </Card>
+      </View>
+    );
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Bills"
+          helperText="View your bills"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithTrailingIcon: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Bills"
+          helperText="View your bills"
+          trailingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithIconContainer: Story = {
+  args: {},
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Electricity"
+          helperText="Last reading 23/03/24"
+          leadingIcon={ElectricityMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+        <CardAction
+          heading="Gas"
+          helperText="Last reading 23/03/24"
+          leadingIcon={GasMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+        <CardAction
+          heading="Gas"
+          helperText="Last reading 23/03/24"
+          leadingIcon={GasMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithBadge: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at bottom"
+          helperText="Badge positioned below text"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="bottom"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at middle"
+          helperText="Badge positioned between heading and helper text"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="middle"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at right"
+          helperText="Badge positioned on the right side"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="right"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </Flex>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Medium size (default)"
+          helperText="Heading size is md"
+          size="md"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Large size"
+          helperText="Heading size is lg"
+          size="lg"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </Flex>
+  ),
+};
+
+export const Loading: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Loading"
+          helperText="This is loading"
+          loading
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Disabled"
+          helperText="This is disabled"
+          disabled
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};

package/src/components/Card/CardAction/CardAction.tsx

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

package/src/components/Card/CardAction/CardActionContent.tsx

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

package/src/components/Card/CardAction/CardActionHelperText.tsx

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

package/src/components/Card/CardAction/CardActionIcon.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 CardActionIcon = ({ 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>
+  );
+};
+
+CardActionIcon.displayName = 'CardActionIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.color.icon.primary,
+    width: 24,
+    height: 24,
+  },
+}));
+
+export default CardActionIcon;

package/src/components/Card/CardAction/CardActionLeadingContent.tsx

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

package/src/components/Card/CardAction/CardActionRoot.tsx

@@ -0,0 +1,258 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useMemo } from 'react';
+import { Pressable, View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Badge } from '../../Badge';
+import { IconContainer } from '../../IconContainer';
+import { Skeleton } from '../../Skeleton';
+import { useCardContext } from '../Card.context';
+import { CardActionContext, ICardActionContext } from './CardAction.context';
+import type CardActionProps from './CardAction.props';
+import CardActionContent from './CardActionContent';
+import CardActionHelperText from './CardActionHelperText';
+import CardActionIcon from './CardActionIcon';
+import CardActionLeadingContent from './CardActionLeadingContent';
+import CardActionText from './CardActionText';
+import CardActionTrailingContent from './CardActionTrailingContent';
+import CardActionTrailingIcon from './CardActionTrailingIcon';
+
+const CardActionRoot = ({
+  heading,
+  helperText,
+  leadingContent,
+  trailingContent,
+  disabled,
+  loading,
+  children,
+  states,
+  badge,
+  badgePosition = 'bottom',
+  iconContainer = true,
+  iconContainerColor,
+  iconContainerVariant,
+  leadingIcon,
+  trailingIcon = ChevronRightSmallIcon,
+  size = 'md',
+  ...props
+}: CardActionProps & { states?: { active?: boolean; disabled?: boolean }; isFirst?: boolean }) => {
+  const { onPress } = props;
+  const { active } = states || { active: false };
+
+  const isLoading = loading;
+  const showPressed = isLoading ? false : !!onPress;
+  const isDisabled = disabled || false;
+
+  const testID = props.testID || 'card-action';
+  const loadingTestID = isLoading ? `${testID}-loading` : testID;
+
+  const { variant, hasOnlyActions } = useCardContext();
+  const isFirst = props.isFirst;
+
+  styles.useVariants({
+    showPressed,
+    active,
+    disabled: isDisabled || isLoading,
+    showDisabled: disabled,
+    hasIconContainer: !loading && iconContainer,
+    variant,
+    isFirst: hasOnlyActions && isFirst,
+  });
+
+  const value: ICardActionContext = useMemo(() => {
+    return {
+      showPressed,
+      active: active || false,
+      loading: isLoading || false,
+      disabled: isDisabled,
+      size,
+    };
+  }, [active, showPressed, isLoading, isDisabled, size]);
+
+  if (loading) {
+    return (
+      <Pressable
+        {...props}
+        testID={loadingTestID}
+        style={[styles.container, styles.alignCenter, props.style as ViewStyle]}
+        disabled={isDisabled}
+      >
+        {leadingContent || leadingIcon ? (
+          <Skeleton width={24} height={24} style={styles.alignCenter} />
+        ) : null}
+        <CardActionContent>
+          <Skeleton width="80%" height={24} borderRadius="xs" />
+          <Skeleton width="100%" height={24} borderRadius="xs" />
+        </CardActionContent>
+        {trailingIcon || trailingContent ? (
+          <Skeleton width={24} height={24} borderRadius="xs" style={styles.alignCenter} />
+        ) : null}
+      </Pressable>
+    );
+  }
+
+  return (
+    <CardActionContext.Provider value={value}>
+      <Pressable
+        {...props}
+        testID={testID}
+        style={[styles.container, props.style as ViewStyle]}
+        disabled={isDisabled}
+        accessibilityRole={onPress ? 'button' : undefined}
+      >
+        {children ? (
+          children
+        ) : (
+          <>
+            {leadingIcon && iconContainer ? (
+              <View style={styles.iconContainerWrap}>
+                <IconContainer
+                  style={styles.iconContainer}
+                  icon={leadingIcon}
+                  variant={iconContainerVariant}
+                  color={iconContainerColor}
+                  radiusNone
+                />
+              </View>
+            ) : null}
+            <View style={styles.withIconContainer}>
+              {leadingContent ? (
+                <CardActionLeadingContent>{leadingContent}</CardActionLeadingContent>
+              ) : null}
+              {leadingIcon && !iconContainer && !leadingContent ? (
+                <CardActionLeadingContent>
+                  <CardActionIcon as={leadingIcon} />
+                </CardActionLeadingContent>
+              ) : null}
+              <CardActionContent>
+                {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+                <CardActionText>{heading}</CardActionText>
+                {badgePosition === 'middle' && badge ? <Badge {...badge} /> : null}
+                {helperText ? <CardActionHelperText>{helperText}</CardActionHelperText> : null}
+                {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+              </CardActionContent>
+              {badgePosition === 'right' && badge ? (
+                <Badge {...badge} style={[badge.style, styles.alignCenter]} />
+              ) : null}
+              {trailingContent ? (
+                <CardActionTrailingContent>{trailingContent}</CardActionTrailingContent>
+              ) : null}
+              {trailingIcon && !trailingContent ? (
+                <CardActionTrailingContent>
+                  <CardActionTrailingIcon as={trailingIcon} />
+                </CardActionTrailingContent>
+              ) : null}
+            </View>
+          </>
+        )}
+      </Pressable>
+    </CardActionContext.Provider>
+  );
+};
+
+CardActionRoot.displayName = 'CardActionRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    paddingVertical: theme.components.cardAction.content.paddingVertical,
+    paddingHorizontal: theme.components.cardAction.content.paddingHorizontal,
+    flexDirection: 'row',
+    gap: theme.components.cardAction.content.gap,
+    borderTopWidth: theme.borderWidth[1],
+    borderColor: theme.color.border.strong,
+    width: '100%',
+    variants: {
+      isFirst: {
+        true: {
+          borderTopWidth: 0,
+        },
+      },
+      disabled: {
+        true: {
+          cursor: 'auto',
+        },
+      },
+      variant: {
+        subtle: {
+          borderColor: theme.color.border.subtle,
+        },
+        emphasis: {
+          borderColor: theme.color.border.strong,
+        },
+      },
+      hasIconContainer: {
+        true: {
+          paddingHorizontal: 0,
+          paddingVertical: 0,
+          gap: 0,
+        },
+      },
+      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: {},
+      },
+    },
+    compoundVariants: [
+      {
+        showPressed: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        },
+      },
+    ],
+  },
+  withIconContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingVertical: theme.components.list.item.functional.padding,
+    paddingHorizontal: theme.components.list.item.functional.padding,
+    gap: theme.components.list.item.gap,
+    flex: 1,
+    variants: {
+      hasIconContainer: {
+        true: {},
+        false: {
+          flex: 1,
+          paddingHorizontal: 0,
+          paddingVertical: 0,
+          alignItems: 'center',
+        },
+      },
+    },
+  },
+  alignCenter: {
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    flex: 1,
+    _web: {
+      overflow: 'visible',
+      height: '100%',
+    },
+  },
+  iconContainerWrap: {
+    flexDirection: 'column',
+  },
+}));
+
+export default CardActionRoot;

package/src/components/Card/CardAction/CardActionText.tsx

@@ -0,0 +1,17 @@
+import { TextProps } from 'react-native';
+import { BodyText } from '../../BodyText';
+import { useCardActionContext } from './CardAction.context';
+
+const CardActionText = ({ children, ...props }: TextProps) => {
+  const { size } = useCardActionContext();
+
+  return (
+    <BodyText size={size} weight="semibold" {...props}>
+      {children}
+    </BodyText>
+  );
+};
+
+CardActionText.displayName = 'CardActionText';
+
+export default CardActionText;

package/src/components/Card/CardAction/CardActionTrailingContent.tsx

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

package/src/components/Card/CardAction/CardActionTrailingIcon.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 CardActionTrailingIcon = ({ 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>
+  );
+};
+
+CardActionTrailingIcon.displayName = 'CardActionTrailingIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.color.icon.primary,
+    minWidth: 20,
+    minHeight: 20,
+  },
+}));
+
+export default CardActionTrailingIcon;

package/src/components/Card/CardAction/index.ts

@@ -0,0 +1,10 @@
+export { default as CardAction } from './CardAction';
+export { useCardActionContext } from './CardAction.context';
+export type { default as CardActionProps } from './CardAction.props';
+export { default as CardActionContent } from './CardActionContent';
+export { default as CardActionHelperText } from './CardActionHelperText';
+export { default as CardActionIcon } from './CardActionIcon';
+export { default as CardActionLeadingContent } from './CardActionLeadingContent';
+export { default as CardActionText } from './CardActionText';
+export { default as CardActionTrailingContent } from './CardActionTrailingContent';
+export { default as CardActionTrailingIcon } from './CardActionTrailingIcon';