@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/src/components/IconContainer/IconContainer.props.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+
+export interface IconContainerProps extends ViewProps {
+  /** Icon component to render inside the container */
+  icon: ComponentType;
+  /** Size of the container */
+  size?: 'sm' | 'md' | 'lg';
+  /** If true, removes border radius from the container */
+  radiusNone?: boolean;
+  /** Background style of the container */
+  variant?: 'subtle' | 'emphasis';
+  /** Background color token of the container */
+  color?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+}
+
+export default IconContainerProps;

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -0,0 +1,130 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { IconContainer } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+
+type IconKey = keyof typeof Icons;
+
+const meta: Meta<typeof IconContainer> = {
+  title: 'Stories / IconContainer',
+  component: IconContainer,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: Object.keys(Icons),
+      mapping: Icons,
+      description: 'Icon component rendered inside the container',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    radiusNone: {
+      control: 'boolean',
+      description: 'Remove border radius (square edges)',
+    },
+    variant: {
+      control: 'select',
+      options: ['subtle', 'emphasis'],
+      description: 'Background emphasis style',
+    },
+    color: {
+      control: 'select',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+      description: 'Semantic color surface family',
+    },
+  },
+  args: {
+    icon: Icons[Object.keys(Icons)[0] as IconKey],
+    size: 'md',
+    radiusNone: false,
+    variant: 'subtle',
+    color: 'pig',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { render: args => <IconContainer {...args} /> };
+
+export const Subtle: Story = {
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  args: {
+    variant: 'subtle',
+  },
+};
+
+export const Emphasis: Story = {
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  args: {
+    variant: 'emphasis',
+  },
+};
+
+export const RadiusNone: Story = {
+  parameters: {
+    controls: { exclude: ['radiusNone'] },
+  },
+  args: {
+    radiusNone: true,
+  },
+};
+
+export const KitchenSink: Story = {
+  parameters: {
+    controls: { exclude: ['radiusNone', 'variant', 'color', 'size'] },
+  },
+  render: ({ icon }) => {
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
+    const colors: Array<
+      'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
+    > = ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'];
+    return (
+      <Flex direction="column" space="lg">
+        {sizes.map(size => (
+          <Box key={size} gap="300">
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
+            <Flex direction="row" wrap="wrap" space="md">
+              {colors.map(color => (
+                <IconContainer
+                  key={`${size}-subtle-${color}`}
+                  icon={icon}
+                  size={size}
+                  variant="subtle"
+                  color={color}
+                />
+              ))}
+            </Flex>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
+            <Flex direction="row" wrap="wrap" space="md">
+              {colors.map(
+                color =>
+                  color !== 'highlight' && (
+                    <IconContainer
+                      key={`${size}-emphasis-${color}`}
+                      icon={icon}
+                      size={size}
+                      variant="emphasis"
+                      color={color}
+                    />
+                  )
+              )}
+            </Flex>
+          </Box>
+        ))}
+      </Flex>
+    );
+  },
+};

package/src/components/IconContainer/IconContainer.tsx

@@ -0,0 +1,180 @@
+import { View } from 'react-native';
+import { StyleSheet, withUnistyles } 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 });
+
+    return (
+      <View style={[styles.container, style]} {...props}>
+        {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
+      </View>
+    );
+  }
+);
+
+IconContainer.displayName = 'IconContainer';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    variants: {
+      size: {
+        sm: {
+          width: theme.components.iconContainer.sm.width,
+          height: theme.components.iconContainer.sm.height,
+          padding: theme.components.iconContainer.sm.padding,
+          borderRadius: theme.components.iconContainer.sm.borderRadiusRounded,
+        },
+        md: {
+          width: theme.components.iconContainer.md.width,
+          height: theme.components.iconContainer.md.height,
+          padding: theme.components.iconContainer.md.padding,
+          borderRadius: theme.components.iconContainer.md.borderRadiusRounded,
+        },
+        lg: {
+          width: theme.components.iconContainer.lg.width,
+          height: theme.components.iconContainer.lg.height,
+          padding: theme.components.iconContainer.lg.padding,
+          borderRadius: theme.components.iconContainer.lg.borderRadiusRounded,
+        },
+      },
+      radiusNone: {
+        true: {
+          borderRadius: 0,
+        },
+        false: {},
+      },
+      variant: {
+        subtle: {},
+        emphasis: {},
+      },
+      color: {
+        pig: {},
+        energy: {},
+        broadband: {},
+        mobile: {},
+        insurance: {},
+        cashback: {},
+        highlight: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'emphasis',
+        color: 'pig',
+        styles: {
+          backgroundColor: theme.color.surface.pig.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'pig',
+        styles: {
+          backgroundColor: theme.color.surface.pig.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'energy',
+        styles: {
+          backgroundColor: theme.color.surface.energy.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'energy',
+        styles: {
+          backgroundColor: theme.color.surface.energy.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'broadband',
+        styles: {
+          backgroundColor: theme.color.surface.broadband.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'broadband',
+        styles: {
+          backgroundColor: theme.color.surface.broadband.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'mobile',
+        styles: {
+          backgroundColor: theme.color.surface.mobile.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'mobile',
+        styles: {
+          backgroundColor: theme.color.surface.mobile.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'insurance',
+        styles: {
+          backgroundColor: theme.color.surface.insurance.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'insurance',
+        styles: {
+          backgroundColor: theme.color.surface.insurance.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'cashback',
+        styles: {
+          backgroundColor: theme.color.surface.cashback.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'cashback',
+        styles: {
+          backgroundColor: theme.color.surface.cashback.subtle,
+        },
+      },
+      {
+        variant: 'emphasis',
+        color: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.default,
+        },
+      },
+      {
+        variant: 'subtle',
+        color: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+        },
+      },
+    ],
+  },
+  icon: {
+    color: theme.color.icon.primary,
+  },
+}));
+
+export default IconContainer;

package/src/components/IconContainer/index.tsx

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

package/src/components/Icons/CircleIcon.tsx

@@ -1,20 +1,18 @@
 import { createIcon } from '@gluestack-ui/icon';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 
 const CircleIcon = createIcon({
   Root: Svg,
   viewBox: '0 0 24 24',
   path: (
-    <>
-      <Path
-        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </>
+    <Path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   ),
 });
 

package/src/components/Input/Input.docs.mdx

@@ -57,12 +57,12 @@ import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = val => {
+    setValue(val);
   };
   return (
     <Input
-      onChange={handleChange}
+      onChangeText={handleChange}
       value={value}
       placeholder="Placeholder"
       leadingIcon={EmailMediumIcon}

package/src/components/Input/Input.props.ts

@@ -70,24 +70,6 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
   onClear?: never;
 }
 
-interface DateInputSpecificProps extends InputWithoutChildrenBaseProps {
-  type: 'date';
-  format?: string;
-  showPasswordToggle?: never;
-  loading?: never;
-  clearable?: never;
-  onClear?: never;
-}
-
-interface CurrencyInputSpecificProps extends InputWithoutChildrenBaseProps {
-  type: 'currency';
-  format?: string;
-  showPasswordToggle?: never;
-  loading?: never;
-  clearable?: never;
-  onClear?: never;
-}
-
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
   type: 'search';
   loading?: boolean;
@@ -101,8 +83,6 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
 export type InputWithoutChildrenProps =
   | TextInputSpecificProps
   | PasswordInputSpecificProps
-  | DateInputSpecificProps
-  | CurrencyInputSpecificProps
   | SearchInputSpecificProps;
 
 /**

package/src/components/Input/Input.stories.tsx

@@ -130,12 +130,6 @@ export const Variants: Story = {
         <VariantTitle title="Type search - loading">
           <Input placeholder="Input placeholder" type="search" loading />
         </VariantTitle>
-        <VariantTitle title="Type currency">
-          <Input type="currency" />
-        </VariantTitle>
-        <VariantTitle title="Type date">
-          <Input type="date" />
-        </VariantTitle>
         <VariantTitle title="Valid">
           <Input validationStatus="valid" placeholder="Input placeholder" />
         </VariantTitle>

package/src/components/Input/Input.tsx

@@ -3,15 +3,12 @@ import { ComponentType, useState } from 'react';
 import type InputProps from './Input.props';
 
 import {
-  CalendarMediumIcon,
   CloseSmallIcon,
   EyeOffSmallIcon,
   EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { Platform } from 'react-native';
 import { useTheme } from '../../hooks';
-import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -59,26 +56,6 @@ const Input = ({
   );
   const { color } = useTheme();
 
-  const defaultFornat = (() => {
-    if (type === 'currency') {
-      return '0.00';
-    }
-    if (type === 'date') {
-      return 'DD/MM/YYYY';
-    }
-    return;
-  })();
-
-  const getPlaceholder = (() => {
-    if (type === 'currency') {
-      return props.placeholder ?? format ?? defaultFornat;
-    }
-    if (type === 'date') {
-      return props.placeholder ?? format ?? defaultFornat;
-    }
-    return props.placeholder;
-  })();
-
   const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
   const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
 
@@ -93,17 +70,7 @@ const Input = ({
     return leadingIcon;
   })();
 
-  const trailingIconComponent = ((): ComponentType | undefined => {
-    if (type === 'date') {
-      return CalendarMediumIcon;
-    }
-    return trailingIcon;
-  })();
-
   const getInputMode = (() => {
-    if (type === 'currency') {
-      return 'decimal';
-    }
     if (type === 'search') {
       return 'search';
     }
@@ -130,25 +97,11 @@ const Input = ({
               <InputIcon as={leadingIconComponent} />
             </InputSlot>
           )}
-          {type === 'currency' && (
-            <InputSlot>
-              <DetailText
-                size="4xl"
-                style={{
-                  // todo: fix this
-                  ...(Platform.OS === 'ios' && { lineHeight: 46 }),
-                }}
-              >
-                £
-              </DetailText>
-            </InputSlot>
-          )}
           <InputField
             type={fieldType}
             inputMode={getInputMode}
             inBottomSheet={inBottomSheet}
             {...props}
-            placeholder={getPlaceholder}
           />
           {shouldShowClear && (
             <InputSlot>
@@ -168,9 +121,9 @@ const Input = ({
               />
             </InputSlot>
           )}
-          {!!trailingIconComponent && (
+          {!!trailingIcon && (
             <InputSlot>
-              <InputIcon as={trailingIconComponent} />
+              <InputIcon as={trailingIcon} />
             </InputSlot>
           )}
         </>

package/src/components/Input/InputField.tsx

@@ -64,13 +64,6 @@ const styles = StyleSheet.create(theme => ({
         text: {},
         password: {},
         search: {},
-        currency: {
-          fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
-          fontFamily: theme.typography.mobile.detailText.fontFamily,
-          fontWeight: theme.typography.mobile.detailText.fontWeight,
-          paddingTop: 0,
-          paddingBottom: 0,
-        },
         date: {},
       },
     },

package/src/components/Modal/Modal.tsx

@@ -154,6 +154,8 @@ const Modal = ({
     }
   };
 
+  styles.useVariants({ loading });
+
   const content = (
     <>
       {loading ? (
@@ -261,6 +263,7 @@ const Modal = ({
       {...props}
       onChange={handleChange}
     >
+      {loading ? <View style={styles.loadingTop} /> : null}
       <BottomSheetScrollView contentContainerStyle={styles.container} ref={scrollViewRef}>
         {content}
       </BottomSheetScrollView>
@@ -272,6 +275,13 @@ const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
     gap: theme.components.dialog.gap,
+    variants: {
+      loading: {
+        true: {
+          paddingTop: 0,
+        },
+      },
+    },
   },
   header: {
     flexDirection: 'row',
@@ -293,7 +303,15 @@ const styles = StyleSheet.create((theme, rt) => ({
   textContent: {
     gap: theme.components.dialog.content.gap,
   },
+  loadingTop: {
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
+    height: 16,
+    backgroundColor: theme.color.surface.neutral.strong,
+  },
   loadingContainer: {
+    borderTopLeftRadius: theme.components.dialog.borderRadius,
+    borderTopRightRadius: theme.components.dialog.borderRadius,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/SectionHeader/SectionHeader.tsx

@@ -55,6 +55,7 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     gap: theme.components.sectionHeader.gap,
     alignItems: 'flex-start',
+    width: '100%',
   },
 }));
 

package/src/components/Tabs/Tab.props.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export interface TabProps extends PressableProps {
+  /** Unique value for the tab */
+  value: string;
+  /** Tab label */
+  children: ReactNode;
+  /** Optional leading icon */
+  icon?: ComponentType<any>;
+  /** Whether the tab is disabled */
+  disabled?: boolean;
+  style?: ViewProps['style'];
+}
+
+export default TabProps;