@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

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

@@ -1,44 +0,0 @@
-import figma from '@figma/code-connect';
-import CardAction from './CardAction';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  CardAction,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8154%3A4346',
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      loading: figma.enum('State', {
-        Loading: true,
-      }),
-      disabled: figma.enum('State', {
-        Disabled: true,
-      }),
-      'aria-disabled': figma.enum('State', {
-        Disabled: true,
-      }),
-      // No matching props could be found for these Figma properties:
-      // "listHeading": figma.string('List heading'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "iconContainer": figma.boolean('Icon container?'),
-      // "trailingIcon20": figma.instance('Trailing icon-20'),
-      // "leadingIcon": figma.boolean('Leading Icon?'),
-      // "leadingIcon24": figma.instance('Leading icon-24'),
-      // "badgeRight": figma.boolean('Badge right?'),
-      // "badgeBottom": figma.boolean('Badge bottom?'),
-      // "badgeMiddle": figma.boolean('Badge middle?'),
-      // "size": figma.enum('Size', {
-      //   "Default": "default",
-      //   "Large": "large"
-      // })
-    },
-    example: props => <CardAction loading={props.loading} disabled={props.disabled} />,
-  }
-);

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

@@ -1,86 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
-import { IconContainerProps } from '../../IconContainer';
-
-interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
-  loading?: boolean;
-  disabled?: boolean;
-  size?: 'md' | 'lg';
-}
-
-interface CardActionContentProps {
-  heading: string;
-  helperText?: string;
-  badge?: ReactNode;
-  badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
-  iconContainer?: boolean;
-  iconContainerVariant?: IconContainerProps['variant'];
-  iconContainerColor?: IconContainerProps['color'];
-}
-
-export interface CardActionWithChildren extends CardActionBaseProps {
-  children: ViewProps['children'];
-  heading?: never;
-  helperText?: never;
-  leadingContent?: never;
-  leadingIcon?: never;
-  trailingContent?: never;
-  trailingIcon?: never;
-  badge?: never;
-  badgePosition?: never;
-  iconContainer?: never;
-  iconContainerVariant?: never;
-  iconContainerColor?: never;
-}
-
-// Leading content variants
-type CardActionWithLeadingContent = CardActionBaseProps &
-  CardActionContentProps & {
-    children?: never;
-    leadingContent: ViewProps['children'];
-    leadingIcon?: never;
-  };
-
-type CardActionWithLeadingIcon = CardActionBaseProps &
-  CardActionContentProps & {
-    children?: never;
-    leadingContent?: never;
-    leadingIcon: ComponentType;
-  };
-
-type CardActionWithNoLeading = CardActionBaseProps &
-  CardActionContentProps & {
-    children?: never;
-    leadingContent?: never;
-    leadingIcon?: never;
-  };
-
-type CardActionLeadingVariants =
-  | CardActionWithLeadingContent
-  | CardActionWithLeadingIcon
-  | CardActionWithNoLeading;
-
-// Trailing content combined with leading variants
-type CardActionWithTrailingContent = CardActionLeadingVariants & {
-  trailingContent: ViewProps['children'];
-  trailingIcon?: never;
-};
-
-type CardActionWithTrailingIcon = CardActionLeadingVariants & {
-  trailingContent?: never;
-  trailingIcon: ComponentType;
-};
-
-type CardActionWithNoTrailing = CardActionLeadingVariants & {
-  trailingContent?: never;
-  trailingIcon?: never;
-};
-
-type CardActionWithoutChildren =
-  | CardActionWithTrailingContent
-  | CardActionWithTrailingIcon
-  | CardActionWithNoTrailing;
-
-type CardActionProps = CardActionWithChildren | CardActionWithoutChildren;
-
-export default CardActionProps;

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

@@ -1,412 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { View } from 'react-native';
-import { BodyText } from '../../';
-import { Badge } from '../../Badge';
-import { Flex } from '../../Flex';
-import Card from '../Card';
-import CardActions from '../CardActions';
-import CardContent from '../CardContent';
-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, gap: 16 }}>
-        <Card variant="emphasis">
-          <CardActions>
-            <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
-          </CardActions>
-        </Card>
-      </View>
-    );
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <View style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Bills"
-            helperText="View your bills"
-            leadingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </View>
-  ),
-};
-
-export const WithTrailingIcon: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <View style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Bills"
-            helperText="View your bills"
-            trailingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </View>
-  ),
-};
-
-export const WithIconContainer: Story = {
-  args: {},
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <View style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <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')}
-          />
-        </CardActions>
-      </Card>
-    </View>
-  ),
-};
-
-export const WithBadge: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Badge at bottom"
-            helperText="Badge positioned below text"
-            leadingIcon={ElectricityMediumIcon}
-            badge={<Badge text="New" />}
-            badgePosition="bottom"
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Badge at middle"
-            helperText="Badge positioned between heading and helper text"
-            leadingIcon={ElectricityMediumIcon}
-            badge={<Badge text="New" />}
-            badgePosition="middle"
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Badge at right"
-            helperText="Badge positioned on the right side"
-            leadingIcon={ElectricityMediumIcon}
-            badge={<Badge text="New" />}
-            badgePosition="right"
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </Flex>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Medium size (default)"
-            helperText="Heading size is md"
-            size="md"
-            leadingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Large size"
-            helperText="Heading size is lg"
-            size="lg"
-            leadingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </Flex>
-  ),
-};
-
-export const Loading: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <View style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Loading"
-            helperText="This is loading"
-            loading
-            leadingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </View>
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <View style={{ width: '100%', maxWidth: 400 }}>
-      <Card variant="emphasis">
-        <CardActions>
-          <CardAction
-            heading="Disabled"
-            helperText="This is disabled"
-            disabled
-            leadingIcon={ElectricityMediumIcon}
-            onPress={() => console.log('pressed')}
-          />
-        </CardActions>
-      </Card>
-    </View>
-  ),
-};
-
-const CustomAction = ({ heading, ...props }: { heading: string }) => {
-  return <CardAction key={heading} heading={heading} {...props} onPress={() => null} />;
-};
-
-const CustomComponent = () => <BodyText>Multiple CardActions within a Card:</BodyText>;
-
-export const WithCustomActions: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  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];
-
-    const actions = [{ text: 'Action 1' }, { text: 'Action 2' }, { text: 'Action 3' }];
-    return (
-      <View style={{ width: '100%', maxWidth: 400, gap: 16 }}>
-        {/* Example 1 */}
-        <Card variant="emphasis">
-          <BodyText>Multiple CardActions within a Card:</BodyText>
-          <CardActions>
-            {actions.map(action => (
-              <CustomAction
-                key={action.text}
-                {...args}
-                heading={action.text}
-                leadingIcon={leadingIcon}
-                trailingIcon={trailingIcon}
-              />
-            ))}
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-          </CardActions>
-        </Card>
-        {/* Example 2 */}
-        <Card variant="emphasis">
-          <CardActions>
-            {actions.map(action => (
-              <CustomAction
-                key={action.text}
-                {...args}
-                heading={action.text}
-                leadingIcon={leadingIcon}
-                trailingIcon={trailingIcon}
-              />
-            ))}
-          </CardActions>
-        </Card>
-        {/* Example 3 */}
-        <Card variant="emphasis">
-          <CardActions>
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-          </CardActions>
-        </Card>
-        {/* Example 4 */}
-        <Card variant="emphasis">
-          <BodyText>Multiple CardActions within a Card:</BodyText>
-        </Card>
-        {/* Example 5 */}
-        <Card variant="emphasis">
-          <BodyText>Multiple CardActions within a Card:</BodyText>
-          <CardActions>
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-          </CardActions>
-        </Card>
-        {/* Example 6 */}
-        <Card variant="emphasis">
-          <CardContent>
-            <CustomComponent />
-          </CardContent>
-          <CardActions>
-            {actions.map(action => (
-              <CustomAction
-                key={action.text}
-                {...args}
-                heading={action.text}
-                leadingIcon={leadingIcon}
-                trailingIcon={trailingIcon}
-              />
-            ))}
-            <CardAction
-              {...args}
-              leadingIcon={leadingIcon}
-              trailingIcon={trailingIcon}
-              onPress={() => null}
-            />
-          </CardActions>
-        </Card>
-      </View>
-    );
-  },
-};

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

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

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

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

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

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