@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,274 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Container } from '.';
+import { lightTheme } from '../../core/themes';
+import { BodyText } from '../BodyText';
+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 / Container',
+  component: Container,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    padding: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The padding of the container.',
+    },
+    p: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The padding of the container.',
+    },
+    paddingHorizontal: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The horizontal padding of the container.',
+    },
+    px: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The horizontal padding of the container.',
+    },
+    paddingVertical: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The vertical padding of the container.',
+    },
+    py: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The vertical padding of the container.',
+    },
+    paddingTop: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The top padding of the container.',
+    },
+    pt: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The top padding of the container.',
+    },
+    paddingBottom: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The bottom padding of the container.',
+    },
+    pb: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The bottom padding of the container.',
+    },
+    paddingLeft: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The left padding of the container.',
+    },
+    pl: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The left padding of the container.',
+    },
+    paddingRight: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The right padding of the container.',
+    },
+    pr: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The right padding of the container.',
+    },
+    margin: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The margin of the container.',
+    },
+    m: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The margin of the container.',
+    },
+    marginHorizontal: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The horizontal margin of the container.',
+    },
+    mx: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The horizontal margin of the container.',
+    },
+    marginVertical: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The vertical margin of the container.',
+    },
+    my: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The vertical margin of the container.',
+    },
+    marginTop: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The top margin of the container.',
+    },
+    mt: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The top margin of the container.',
+    },
+    marginBottom: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The bottom margin of the container.',
+    },
+    mb: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The bottom margin of the container.',
+    },
+    marginLeft: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The left margin of the container.',
+    },
+    ml: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The left margin of the container.',
+    },
+    marginRight: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The right margin of the container.',
+    },
+    mr: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The right margin of the container.',
+    },
+    space: {
+      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      control: 'radio',
+      description: 'The space between child elements (gap).',
+    },
+    gap: {
+      options: Object.keys(lightTheme.space),
+      control: 'select',
+      description: 'The space between child elements.',
+    },
+    backgroundColor: {
+      options: ['backgroundBrand', 'backgroundPrimary', 'backgroundSecondary', 'transparent'],
+      control: 'select',
+      description: 'The background color of the container.',
+    },
+    bg: {
+      options: ['backgroundBrand', 'backgroundPrimary', 'backgroundSecondary', 'transparent'],
+      control: 'select',
+      description: 'The background color of the 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: {
+    space: 'md',
+  },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => (
+    <Box backgroundColor="red100">
+      <Container {...args} backgroundColor="backgroundSecondary">
+        <Box bg="blue400" p="200" borderRadius="md">
+          <BodyText>Container content 1</BodyText>
+        </Box>
+        <Box bg="purple400" p="200" borderRadius="md">
+          <BodyText>Container content 2</BodyText>
+        </Box>
+        <Box bg="piggyPink400" p="200" borderRadius="md">
+          <BodyText>Container content 3</BodyText>
+        </Box>
+      </Container>
+    </Box>
+  ),
+};
+
+export const WithPadding: Story = {
+  args: {
+    padding: '300',
+  },
+  render: args => (
+    <Box backgroundColor="red100">
+      <Container {...args} backgroundColor="backgroundSecondary">
+        <Box bg="blue400" p="200" borderRadius="md">
+          <BodyText>Container with padding</BodyText>
+        </Box>
+      </Container>
+    </Box>
+  ),
+};
+
+export const WithMargin: Story = {
+  args: {
+    margin: '300',
+  },
+  render: args => (
+    <Box backgroundColor="red100">
+      <Container {...args} backgroundColor="backgroundSecondary">
+        <Box bg="blue400" p="200" borderRadius="md">
+          <BodyText>Container with margin</BodyText>
+        </Box>
+      </Container>
+    </Box>
+  ),
+};
+
+export const WithCustomSpacing: Story = {
+  args: {
+    space: 'xl',
+    paddingHorizontal: '200',
+    paddingVertical: '300',
+  },
+  render: args => (
+    <Box backgroundColor="red100">
+      <Container {...args} backgroundColor="backgroundSecondary">
+        <Box bg="blue400" p="200" borderRadius="md">
+          <BodyText>Item 1</BodyText>
+        </Box>
+        <Box bg="purple400" p="200" borderRadius="md">
+          <BodyText>Item 2</BodyText>
+        </Box>
+        <Box bg="piggyPink400" p="200" borderRadius="md">
+          <BodyText>Item 3</BodyText>
+        </Box>
+        <Box bg="orange400" p="200" borderRadius="md">
+          <BodyText>Item 4</BodyText>
+        </Box>
+      </Container>
+    </Box>
+  ),
+};
+
+export const LayoutTokens: Story = {
+  render: () => (
+    <Box backgroundColor="red100">
+      <Container backgroundColor="backgroundSecondary">
+        <Box bg="blue100" p="200" borderRadius="md">
+          <BodyText>
+            This Container uses the responsive layout tokens from the design system. It will
+            automatically adjust margin and padding based on the current breakpoint.
+          </BodyText>
+        </Box>
+      </Container>
+    </Box>
+  ),
+};

package/src/components/Container/Container.tsx

@@ -0,0 +1,52 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+import type ContainerProps from './Container.props';
+
+const Container = ({ style, children, space = 'md', ...props }: ContainerProps) => {
+  const { computedStyles, remainingProps } = useStyleProps(props);
+
+  styles.useVariants({ space });
+  return (
+    <View style={[styles.container(computedStyles), style]} {...remainingProps}>
+      {children}
+    </View>
+  );
+};
+
+Container.displayName = 'Container';
+
+const styles = StyleSheet.create(theme => ({
+  container: extra => ({
+    paddingTop:
+      typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+        ? {
+            base: theme.layout.mobile.container.paddingTop,
+            md: theme.layout.tablet.container.paddingTop,
+            lg: theme.layout.desktop.container.paddingTop,
+          }
+        : undefined,
+    paddingBottom:
+      typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+        ? {
+            base: theme.layout.mobile.container.paddingBottom,
+            md: theme.layout.tablet.container.paddingBottom,
+            lg: theme.layout.desktop.container.paddingBottom,
+          }
+        : undefined,
+    marginHorizontal:
+      typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
+        ? {
+            base: theme.layout.mobile.container.marginHorizontal,
+            md: theme.layout.tablet.container.marginHorizontal,
+            lg: theme.layout.desktop.container.marginHorizontal,
+          }
+        : undefined,
+    ...extra,
+    variants: {
+      space: theme.globalStyle.variants.space,
+    },
+  }),
+}));
+
+export default Container;

package/src/components/Container/index.tsx

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export type { default as ContainerProps } from './Container.props';

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -82,7 +82,7 @@ const styles = StyleSheet.create(theme => ({
   input: {
     fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
-    fontWeight: theme.typography.mobile.detailText.fontWeight,
+    fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
     paddingTop: 0,
     paddingBottom: 0,
     paddingLeft: 0,

package/src/components/Helper/HelperIcon.tsx

@@ -12,7 +12,8 @@ const HelperIcon = (props: IconProps) => {
     <Icon
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
       {...props}

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,5 @@
 import { createIcon } from '@gluestack-ui/icon';
+import type React from 'react';
 import { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { withUnistyles } from 'react-native-unistyles';
@@ -44,8 +45,8 @@ const PrimitiveIcon = withUnistyles(
 
 PrimitiveIcon.displayName = 'PrimitiveIcon';
 
-export const Icon = createIcon({
-  Root: PrimitiveIcon,
-});
+export const Icon: React.ForwardRefExoticComponent<IconProps> = createIcon({
+  Root: PrimitiveIcon as any,
+}) as React.ForwardRefExoticComponent<IconProps>;
 
 export default Icon;

package/src/components/IconButton/IconButtonIcon.tsx

@@ -18,7 +18,8 @@ const IconButtonIcon = (props: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }
     >

package/src/components/IconContainer/IconContainer.tsx

@@ -1,27 +1,25 @@
 import { View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import type IconContainerProps from './IconContainer.props';
 
-const IconContainer = withUnistyles(
-  ({
-    icon: IconComp,
-    size = 'md',
-    radiusNone = false,
-    variant = 'subtle',
-    color = 'pig',
-    style,
-    ...props
-  }: IconContainerProps) => {
-    styles.useVariants({ size, radiusNone, variant, color });
+const IconContainer = ({
+  icon: IconComp,
+  size = 'md',
+  radiusNone = false,
+  variant = 'subtle',
+  color = 'pig',
+  style,
+  ...props
+}: IconContainerProps) => {
+  styles.useVariants({ size, radiusNone, variant, color });
 
-    return (
-      <View style={[styles.container, style]} {...props}>
-        {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
-      </View>
-    );
-  }
-);
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
+    </View>
+  );
+};
 
 IconContainer.displayName = 'IconContainer';
 

package/src/components/Input/InputField.tsx

@@ -15,6 +15,7 @@ const InputField = ({
 
   if (inBottomSheet) {
     return (
+      // @ts-expect-error - BottomSheetTextInput type issue
       <BottomSheetTextInput
         placeholderTextColor={color.text.secondary}
         selectionColor={color.purple[700]}
@@ -52,7 +53,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     variants: {
       focused: {

package/src/components/Input/InputIcon.tsx

@@ -9,7 +9,8 @@ const InputIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) =
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

package/src/components/Link/LinkIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useLinkContext } from './Link.context';
 
 const LinkIcon = ({ children, ...props }: IconProps) => {
   const { active, inverted, disabled } = useLinkContext();
@@ -13,7 +13,8 @@ const LinkIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

package/src/components/List/ListAction/ListActionTrailingIcon.tsx

@@ -10,7 +10,8 @@ const ListActionTrailingIcon = ({ children, ...props }: IconProps & { as?: Compo
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

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

@@ -9,7 +9,8 @@ const ListItemIcon = ({ children, ...props }: IconProps & { as?: ComponentType }
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

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

@@ -10,7 +10,8 @@ const ListItemTrailingIcon = ({ children, ...props }: IconProps & { as?: Compone
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >
@@ -24,8 +25,6 @@ ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 const styles = StyleSheet.create(theme => ({
   icon: {
     color: theme.color.icon.primary,
-    width: 24,
-    height: 24,
   },
 }));
 

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -11,8 +11,8 @@ interface ProgressStepInternalProps extends ProgressStepProps {
   isLast?: boolean;
 }
 
-const ProgressStep = ({ state, index = 0, isLast = false, ...rest }: ProgressStepInternalProps) => {
-  styles.useVariants({ state, isLast });
+const ProgressStep = ({ status, index = 0, isLast = false, ...rest }: ProgressStepInternalProps) => {
+  styles.useVariants({ status, isLast });
 
   const renderStepNumber = () => {
     return (
@@ -26,13 +26,13 @@ const ProgressStep = ({ state, index = 0, isLast = false, ...rest }: ProgressSte
     <View
       style={styles.container}
       accessible
-      aria-label={`Step ${index + 1}, ${rest.id}, ${state}`}
+      aria-label={`Step ${index + 1}, ${rest.id}, ${status}`}
       {...rest}
     >
       <View style={styles.step}>
-        {state === 'complete' ? (
+        {status === 'complete' ? (
           <Icon as={TickSmallIcon} width={20} height={20} style={styles.text} />
-        ) : state === 'active' ? (
+        ) : status === 'active' ? (
           <View style={styles.inner}>{renderStepNumber()}</View>
         ) : (
           renderStepNumber()
@@ -70,7 +70,7 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     variants: {
-      state: {
+      status: {
         complete: {
           backgroundColor: theme.color.surface.brand.default,
         },
@@ -97,7 +97,7 @@ const styles = StyleSheet.create(theme => ({
   },
   text: {
     variants: {
-      state: {
+      status: {
         complete: {
           color: theme.color.text.inverted,
         },
@@ -116,7 +116,7 @@ const styles = StyleSheet.create(theme => ({
     flex: 1,
     height: theme.components.progressStepper.bar.height,
     variants: {
-      state: {
+      status: {
         complete: {
           backgroundColor: theme.components.progressStepper.bar.complete.backgroundColor,
         },

package/src/components/ProgressStepper/ProgressStepper.docs.mdx

@@ -15,7 +15,7 @@ A form helper component that displays a series of dots connected by lines, showi
 - [Usage](#usage)
 - [Examples](#examples)
 - [API](#api)
-- [Step States](#step-states-1)
+- [Step Statuses](#step-statuses-1)
 - [Accessibility](#accessibility)
 - [Best Practices](#best-practices)
 
@@ -29,11 +29,11 @@ The `ProgressStepper` component uses a compound component pattern, making it eas
 import { ProgressStepper, ProgressStep } from '@hearth/react-native';
 
 <ProgressStepper>
-  <ProgressStep id={"1"} state="complete" />
-  <ProgressStep id={"2"} state="complete" />
-  <ProgressStep id={"3"} state="active" />
-  <ProgressStep id={"4"} state="incomplete" />
-  <ProgressStep id={"5"} state="incomplete" />
+  <ProgressStep id={"1"} status="complete" />
+  <ProgressStep id={"2"} status="complete" />
+  <ProgressStep id={"3"} status="active" />
+  <ProgressStep id={"4"} status="incomplete" />
+  <ProgressStep id={"5"} status="incomplete" />
 </ProgressStepper>
 ```
 
@@ -43,11 +43,11 @@ import { ProgressStepper, ProgressStep } from '@hearth/react-native';
 
 <Canvas of={ProgressStepperStories.Playground} />
 
-### Step States
+### Step Statuses
 
-See how different step states are visualized:
+See how different step statuses are visualized:
 
-<Canvas of={ProgressStepperStories.StepStates} />
+<Canvas of={ProgressStepperStories.StepStatuses} />
 
 ### Basic
 
@@ -66,9 +66,9 @@ See how different step states are visualized:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `id` | `string` | Required | Unique identifier for the step |
-| `state` | `'complete' \| 'active' \| 'incomplete'` | Required | Current state of the step |
+| `status` | `'complete' \| 'active' \| 'incomplete'` | Required | Current status of the step |
 
-## Step States
+## Step Statuses
 
 - **complete**: Step has been finished, shows a checkmark icon
 - **active**: Current step, shows a number with highlighted background

package/src/components/ProgressStepper/ProgressStepper.props.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 
-export type StepState = 'complete' | 'active' | 'incomplete';
+export type StepStatus = 'complete' | 'active' | 'incomplete';
 
 export interface ProgressStepperProps extends ViewProps {
   /**
@@ -15,9 +15,9 @@ export interface ProgressStepProps extends ViewProps {
    */
   id: string;
   /**
-   * Current state of the step
+   * Current status of the step
    */
-  state: StepState;
+  status: StepStatus;
 }
 
 export interface ProgressStepperRootProps extends ViewProps {