@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/ExpandableCard/ExpandableCardLeadingContent.tsx

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

package/src/components/ExpandableCard/ExpandableCardText.tsx

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

package/src/components/ExpandableCard/ExpandableCardTrailingContent.tsx

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

package/src/components/ExpandableCard/ExpandableCardTrailingIcon.tsx

@@ -1,30 +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 ExpandableCardTrailingIcon = ({ 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>
-  );
-};
-
-ExpandableCardTrailingIcon.displayName = 'ExpandableCardTrailingIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    color: theme.color.icon.primary,
-  },
-}));
-
-export default ExpandableCardTrailingIcon;

package/src/components/ExpandableCard/ExpandableCardTrigger.props.ts

@@ -1,76 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { PressableProps } from 'react-native';
-
-interface ExpandableCardTriggerSharedProps extends Omit<PressableProps, 'children'> {
-  /**
-   * Whether the expandable card is expanded
-   */
-  isExpanded: boolean;
-  /**
-   * Whether to show the chevron when providing custom children.
-   * @default true
-   */
-  showChevron?: boolean;
-  /**
-   * Whether the trigger is disabled
-   */
-  disabled?: boolean;
-  /* Optional children */
-  children?: ReactNode;
-}
-
-interface ExpandableCardTriggerDefaultContentProps {
-  /**
-   * The main heading text
-   */
-  heading?: string;
-  /**
-   * Optional helper text displayed below the heading
-   */
-  helperText?: string;
-  /**
-   * Leading icon component
-   */
-  leadingIcon?: ComponentType;
-  /**
-   * Content to display on the left side (e.g., icon, avatar)
-   */
-  leadingContent?: ReactNode;
-  /**
-   * Optional badge to display
-   */
-  badge?: ReactNode;
-  /**
-   * Position of the badge relative to the heading
-   * @default 'bottom'
-   */
-  badgePosition?: 'top' | 'bottom';
-  /**
-   * Optional numeric value to display
-   */
-  numericValue?: string | number;
-
-  /**
-   * Custom trigger content that replaces the default trigger layout.
-   */
-  triggerContent?: never;
-}
-
-interface ExpandableCardTriggerCustomContentProps {
-  /**
-   * Custom trigger content that replaces the default trigger layout.
-   */
-  triggerContent: ReactNode;
-  heading?: never;
-  helperText?: never;
-  leadingIcon?: never;
-  leadingContent?: never;
-  badge?: never;
-  badgePosition?: never;
-  numericValue?: never;
-}
-
-type ExpandableCardTriggerProps = ExpandableCardTriggerSharedProps &
-  (ExpandableCardTriggerDefaultContentProps | ExpandableCardTriggerCustomContentProps);
-
-export default ExpandableCardTriggerProps;

package/src/components/ExpandableCard/ExpandableCardTrigger.tsx

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

package/src/components/ExpandableCard/ExpandableCardTriggerRoot.tsx

@@ -1,173 +0,0 @@
-import {
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import ExpandableCardContent from './ExpandableCardContent';
-import ExpandableCardHelperText from './ExpandableCardHelperText';
-import ExpandableCardIcon from './ExpandableCardIcon';
-import ExpandableCardLeadingContent from './ExpandableCardLeadingContent';
-import ExpandableCardText from './ExpandableCardText';
-import ExpandableCardTrailingContent from './ExpandableCardTrailingContent';
-import ExpandableCardTrailingIcon from './ExpandableCardTrailingIcon';
-import type ExpandableCardTriggerProps from './ExpandableCardTrigger.props';
-
-const ExpandableCardTriggerRoot = ({
-  heading,
-  helperText,
-  leadingIcon,
-  leadingContent,
-  badge,
-  badgePosition = 'bottom',
-  numericValue,
-  triggerContent,
-  isExpanded,
-  showChevron = true,
-  disabled,
-  states,
-  children,
-  ...props
-}: ExpandableCardTriggerProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const { active } = states || { active: false };
-
-  const testID = props.testID || 'expandable-card-trigger';
-
-  styles.useVariants({
-    active,
-    disabled: !!disabled,
-  });
-
-  const renderLeadingContent = () => {
-    if (leadingIcon) {
-      return (
-        <ExpandableCardLeadingContent>
-          <ExpandableCardIcon as={leadingIcon} />
-        </ExpandableCardLeadingContent>
-      );
-    }
-
-    if (leadingContent) {
-      return <ExpandableCardLeadingContent>{leadingContent}</ExpandableCardLeadingContent>;
-    }
-
-    return null;
-  };
-
-  const defaultAccessibilityLabel = [heading, helperText].filter(Boolean).join(', ');
-
-  const renderDefaultContent = () => (
-    <>
-      {renderLeadingContent()}
-      <ExpandableCardContent>
-        {badgePosition === 'top' ? badge : null}
-        <ExpandableCardText>{heading}</ExpandableCardText>
-        {helperText && <ExpandableCardHelperText>{helperText}</ExpandableCardHelperText>}
-        {badgePosition === 'bottom' ? badge : null}
-      </ExpandableCardContent>
-      {!!numericValue && (
-        <BodyText weight="semibold" style={styles.numericValue}>
-          {numericValue}
-        </BodyText>
-      )}
-      <ExpandableCardTrailingContent style={styles.chevron}>
-        <ExpandableCardTrailingIcon as={isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon} />
-      </ExpandableCardTrailingContent>
-    </>
-  );
-
-  const renderChevron = () => (
-    <ExpandableCardTrailingContent style={styles.chevron}>
-      <ExpandableCardTrailingIcon as={isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon} />
-    </ExpandableCardTrailingContent>
-  );
-
-  const renderCustomTriggerContent = () => (
-    <>
-      {triggerContent}
-      {showChevron ? renderChevron() : null}
-    </>
-  );
-
-  const renderChildrenContent = () => (
-    <>
-      {children}
-      {showChevron ? renderChevron() : null}
-    </>
-  );
-
-  let triggerBody = renderDefaultContent();
-
-  if (triggerContent !== undefined) {
-    triggerBody = renderCustomTriggerContent();
-  }
-
-  if (children) {
-    triggerBody = renderChildrenContent();
-  }
-
-  return (
-    <Pressable
-      {...props}
-      testID={testID}
-      style={[styles.container, props.style as ViewStyle]}
-      disabled={disabled}
-      accessibilityRole="button"
-      accessibilityState={{ expanded: isExpanded, disabled }}
-      accessibilityLabel={props.accessibilityLabel || defaultAccessibilityLabel || undefined}
-    >
-      {triggerBody}
-    </Pressable>
-  );
-};
-
-ExpandableCardTriggerRoot.displayName = 'ExpandableCardTriggerRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    paddingVertical: theme.components.card.mobile.padding,
-    paddingHorizontal: theme.components.card.mobile.padding,
-    flexDirection: 'row',
-    width: '100%',
-    gap: theme.components.expandableCard.gapHorizontal,
-    variants: {
-      disabled: {
-        true: {
-          cursor: 'auto',
-          opacity: theme.opacity.disabled,
-        },
-        false: {
-          _web: {
-            _hover: {
-              backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
-            },
-            _active: {
-              backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-            },
-          },
-        },
-      },
-      active: {
-        true: {},
-      },
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        active: true,
-        styles: {
-          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-        },
-      },
-    ],
-  },
-  chevron: {
-    justifyContent: 'center',
-  },
-  numericValue: {
-    alignSelf: 'center',
-  },
-}));
-
-export default ExpandableCardTriggerRoot;

package/src/components/ExpandableCard/index.ts

@@ -1,14 +0,0 @@
-export { default as ExpandableCard } from './ExpandableCard';
-export type { default as ExpandableCardProps } from './ExpandableCard.props';
-export { default as ExpandableCardContent } from './ExpandableCardContent';
-export { default as ExpandableCardExpandedContent } from './ExpandableCardExpandedContent';
-export { default as ExpandableCardGroup } from './ExpandableCardGroup';
-export type { default as ExpandableCardGroupProps } from './ExpandableCardGroup.props';
-export { default as ExpandableCardHelperText } from './ExpandableCardHelperText';
-export { default as ExpandableCardIcon } from './ExpandableCardIcon';
-export { default as ExpandableCardLeadingContent } from './ExpandableCardLeadingContent';
-export { default as ExpandableCardText } from './ExpandableCardText';
-export { default as ExpandableCardTrailingContent } from './ExpandableCardTrailingContent';
-export { default as ExpandableCardTrailingIcon } from './ExpandableCardTrailingIcon';
-export { default as ExpandableCardTrigger } from './ExpandableCardTrigger';
-export type { default as ExpandableCardTriggerProps } from './ExpandableCardTrigger.props';

package/src/components/Flex/Flex.props.ts

@@ -1,31 +0,0 @@
-import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import {
-  DisplayProps,
-  FlexLayoutProps,
-  GapProps,
-  MarginProps,
-  PaddingProps,
-  SpacingValues,
-} from '../../types';
-
-interface FlexProps
-  extends
-    ViewProps,
-    MarginProps,
-    PaddingProps,
-    FlexLayoutProps,
-    GapProps,
-    Omit<DisplayProps, 'direction'> {
-  direction?: ViewStyle['flexDirection'];
-  align?: FlexAlignType;
-  justify?: ViewStyle['justifyContent'];
-  wrap?: ViewStyle['flexWrap'];
-  spacing?: SpacingValues;
-  /**
-   * The space between child elements (gap).
-   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
-   */
-  space?: SpacingValues;
-}
-
-export default FlexProps;

package/src/components/Flex/Flex.stories.tsx

@@ -1,78 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Flex } from '.';
-import { Box } from '../Box';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Stories / Flex',
-  component: Flex,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    direction: {
-      options: ['row', 'column', 'row-reverse', 'column-reverse'],
-      control: 'select',
-      description: 'The direction of the flex container.',
-    },
-    align: {
-      options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
-      control: 'select',
-      description: 'The align of the flex container.',
-    },
-    wrap: {
-      options: ['wrap', 'nowrap', 'wrap-reverse'],
-      control: 'radio',
-      description: 'The wrap of the flex container.',
-    },
-    justify: {
-      options: [
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ],
-      control: 'select',
-      description: 'The justify of the flex container.',
-    },
-    spacing: {
-      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-      control: 'radio',
-      description: 'The space of the flex container.',
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    direction: 'row',
-    align: 'center',
-    wrap: 'wrap',
-    justify: 'flex-start',
-    spacing: 'sm',
-  },
-} satisfies Meta<typeof Flex>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => (
-    <Flex {...args}>
-      {Array.from({ length: 4 }).map((_, index) => (
-        <Box
-          key={index}
-          // @ts-expect-error - This is a playground
-          bg={`grey${index + 1}00`}
-          w={100 + index * 10}
-          h={100 + index * 10}
-          borderColor="strong"
-          borderWidth="2"
-          borderRadius="md"
-        />
-      ))}
-    </Flex>
-  ),
-};

package/src/components/Flex/Flex.tsx

@@ -1,46 +0,0 @@
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useStyleProps } from '../../hooks';
-import FlexProps from './Flex.props';
-
-const Flex = ({
-  style,
-  children,
-  direction = 'column',
-  align = 'flex-start',
-  justify = 'flex-start',
-  wrap = 'nowrap',
-  spacing = 'md',
-  space,
-  ...rest
-}: FlexProps) => {
-  const propStyle: ViewStyle = {
-    flexDirection: direction,
-    alignItems: align,
-    justifyContent: justify,
-    flexWrap: wrap,
-  };
-
-  const { computedStyles, remainingProps } = useStyleProps(rest);
-
-  styles.useVariants({ spacing: space ?? spacing });
-
-  return (
-    <View style={[propStyle, styles.flex, computedStyles, style]} {...remainingProps}>
-      {children}
-    </View>
-  );
-};
-
-Flex.displayName = 'Flex';
-
-const styles = StyleSheet.create(theme => ({
-  flex: {
-    display: 'flex',
-    variants: {
-      spacing: theme.globalStyle.variants.spacing,
-    },
-  },
-}));
-
-export default Flex;

package/src/components/Flex/index.ts

@@ -1 +0,0 @@
-export { default as Flex } from './Flex';

package/src/components/FormField/FormFielInvalidIcon.tsx

@@ -1,11 +0,0 @@
-import { HelperIcon } from '../Helper';
-import IconProps from '../Icon/Icon.props';
-import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-
-const FormFieldInvalidIcon = (props: Omit<IconProps, 'as'>) => (
-  <HelperIcon as={ErrorCircleSmallIcon} {...props} />
-);
-
-FormFieldInvalidIcon.displayName = 'FormFieldInvalidIcon';
-
-export default FormFieldInvalidIcon;

package/src/components/FormField/FormField.context.ts

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-import { FormFieldBaseProps } from './FormField.props';
-
-export const FormFieldContext = createContext<
-  FormFieldBaseProps & {
-    setShouldHandleAccessibility?: (value: boolean) => void;
-    shouldHandleAccessibility?: boolean;
-  }
->({});
-
-export const useFormFieldContext = () => useContext(FormFieldContext);

package/src/components/FormField/FormField.figma.tsx

@@ -1,23 +0,0 @@
-import React from "react"
-import FormField from "./FormField"
-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(
-  FormField,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8364%3A1546",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper text?')
-    },
-    example: (props) => <FormField />,
-  },
-)

package/src/components/FormField/FormField.props.ts

@@ -1,20 +0,0 @@
-import type { ComponentType } from 'react';
-import type { ViewProps } from 'react-native';
-
-export interface FormFieldBaseProps {
-  validationStatus?: 'valid' | 'invalid' | 'initial';
-  disabled?: boolean;
-  readonly?: boolean;
-  label?: string;
-  labelVariant?: 'heading' | 'body';
-  helperText?: string;
-  helperIcon?: ComponentType;
-  validText?: string;
-  invalidText?: string;
-  required?: boolean;
-  accessibilityHandledByChildren?: boolean;
-}
-
-interface FormFieldProps extends FormFieldBaseProps, ViewProps {}
-
-export default FormFieldProps;