@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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/Link/Link.props.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { PressableProps, TextProps } from 'react-native';
+import { IconProps } from '../Icon';
 
 export interface LinkProps extends Omit<PressableProps, 'children'> {
   children: TextProps['children'];
@@ -10,6 +11,8 @@ export interface LinkProps extends Omit<PressableProps, 'children'> {
   icon?: ComponentType;
   iconPosition?: 'left' | 'right';
   showIcon?: boolean;
+  textStyle?: TextProps['style'];
+  iconStyle?: IconProps['style'];
 }
 
 export default LinkProps;

package/src/components/Link/Link.tsx

@@ -1,9 +1,9 @@
-import type { LinkProps } from './Link.props';
 import { createLink } from '@gluestack-ui/link';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import type { LinkProps } from './Link.props';
+import LinkIcon from './LinkIcon';
 import LinkRoot from './LinkRoot';
 import LinkTextComponent from './LinkText';
-import LinkIcon from './LinkIcon';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const LinkComponent = createLink({
   Root: LinkRoot,
@@ -21,14 +21,20 @@ const Link = ({
   target = '_self',
   iconPosition = 'right',
   showIcon = true,
+  textStyle,
+  iconStyle,
   ...props
 }: LinkProps) => {
   const LinkAny = LinkComponent as any;
   return (
     <LinkAny {...props} isDisabled={disabled} isExternal={target === '_blank'}>
-      {showIcon && icon && iconPosition === 'left' ? <LinkIcon as={icon} /> : null}
-      <LinkText>{children}</LinkText>
-      {showIcon && icon && iconPosition === 'right' ? <LinkIcon as={icon} /> : null}
+      {showIcon && icon && iconPosition === 'left' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
+      <LinkText style={textStyle}>{children}</LinkText>
+      {showIcon && icon && iconPosition === 'right' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
     </LinkAny>
   );
 };

package/src/components/List/List.docs.mdx

@@ -4,7 +4,8 @@ import {
   ChevronRightSmallIcon,
   ElectricityMediumIcon,
   GasMediumIcon,
-  HomeFilledMediumIcon,
+  InfoMediumIcon as HomeMediumIcon,
+  // HomeMediumIcon,
   PaymentMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -15,7 +16,6 @@ import {
   FlatList,
   Image,
   List,
-  SectionHeader,
   ListItem,
   ListItemContent,
   ListItemHelperText,
@@ -24,6 +24,7 @@ import {
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
+  SectionHeader,
 } from '../../';
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
@@ -87,21 +88,21 @@ const MyComponent = () => (
 
 ### `List`
 
-| Name                    | Type                                                                                              | Default   | Description                                                |
-| ----------------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
-| container               | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
-| heading                 | `string`                                                                                          |           | The text to display in the heading of the list.            |
-| helperText              | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
-| linkText                | `string`                                                                                          |           | The text for the link in the heading.                      |
-| linkHref                | `string`                                                                                          |           | The href for the link in the heading.                      |
-| linkOnPress             | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
-| linkTarget              | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |                   |
-| linkIcon                | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
-| linkIconPosition        | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
-| linkShowIcon            | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
-| divider                 | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
-| loading                 | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
-| disabled                | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
+| Name             | Type                                                                                              | Default   | Description                                                |
+| ---------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- | --- |
+| container        | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
+| heading          | `string`                                                                                          |           | The text to display in the heading of the list.            |
+| helperText       | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
+| linkText         | `string`                                                                                          |           | The text for the link in the heading.                      |
+| linkHref         | `string`                                                                                          |           | The href for the link in the heading.                      |
+| linkOnPress      | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
+| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |     |
+| linkIcon         | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
+| linkIconPosition | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
+| linkShowIcon     | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
+| divider          | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
+| loading          | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
+| disabled         | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
 
 ### `ListItem`
 
@@ -172,7 +173,7 @@ If you need to use the List component in a more advanced way, you can use the pa
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -214,7 +215,7 @@ import {
   BillMediumIcon,
   ChevronRightSmallIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -247,7 +248,7 @@ const MyComponent = () => (
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -302,7 +303,7 @@ the `Card` and child `ListItem` components.
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />
@@ -314,7 +315,7 @@ import { List, ListItem, Card } from '@utilitywarehouse/hearth-react-native';
 import {
   BillMediumIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -332,7 +333,7 @@ const MyComponent = () => (
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />

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',