@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/src/components/Carousel/CarouselItem.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { CarouselItemProps } from './Carousel.props';
+
+export const CarouselItem = ({
+  active,
+  children,
+  inactiveOpacity = 1,
+  style,
+  width,
+  ...props
+}: CarouselItemProps) => {
+  const isWeb = Platform.OS === 'web';
+  const opacity = useSharedValue<number>(inactiveOpacity);
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      opacity: opacity.value,
+      width,
+    }),
+    [opacity, width]
+  );
+
+  useEffect(() => {
+    opacity.value = withTiming(active ? 1 : inactiveOpacity, { duration: 200 });
+  }, [active, inactiveOpacity, opacity]);
+
+  // For web, use a regular View with CSS transitions
+  if (isWeb) {
+    return (
+      <View
+        style={[
+          styles.container,
+          style,
+          {
+            opacity: active ? 1 : inactiveOpacity,
+            width,
+          },
+        ]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  // For native, use Animated.View with reanimated
+  return (
+    <Animated.View style={[styles.container, style as false, animatedStyles]} {...props}>
+      {children}
+    </Animated.View>
+  );
+};
+
+CarouselItem.displayName = 'CarouselItem';
+
+const styles = StyleSheet.create(() => ({
+  container: {
+    _web: {
+      transition: 'opacity 200ms ease-in-out',
+    },
+  },
+}));
+
+export default CarouselItem;

package/src/components/Carousel/index.ts

@@ -0,0 +1,6 @@
+export * from './Carousel';
+export * from './Carousel.props';
+export * from './CarouselControls';
+export * from './CarouselItem';
+
+export { default as Carousel } from './Carousel';

package/src/components/Checkbox/CheckboxTextContent.tsx

@@ -1,14 +1,22 @@
-import FlexProps from '../Flex/Flex.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
-const CheckboxTextContent = ({ children, ...props }: FlexProps) => {
+const CheckboxTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex style={[styles.content, style]} direction="column" space="none" {...props}>
       {children}
     </Flex>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 
 export default CheckboxTextContent;

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -56,7 +56,7 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 | focused             | boolean                             | `false`     | Forces the focused visual state                                                                                           |
 | inBottomSheet       | boolean                             | `false`     | Use BottomSheetTextInput when true                                                                                        |
 | placeholder         | string                              | `'0.00'`    | Placeholder text                                                                                                          |
-| autoFormatThousands | boolean                             | `false`     | Automatically inserts thousand separators while the user types _(Only works with controlled components via onTextChange)_ |
+| disableGroupSeparator | boolean                             | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 
@@ -97,12 +97,12 @@ const MyComponent = () => {
 
 ## Formatting
 
-Enable automatic thousand separator formatting by setting `autoFormatThousands`.
+Automatic thousand separator formatting can be disabled by setting `disableGroupSeparator`.
 
-<Canvas of={Stories.AutoFormatThousands} />
+<Canvas of={Stories.DisableGroupSeparator} />
 
 ```tsx
-<CurrencyInput autoFormatThousands value="1234567.89" /> // displays 1,234,567.89
+<CurrencyInput disableGroupSeparator value="1234567.89" /> // displays 1234567.89
 ```
 
 Notes:

package/src/components/CurrencyInput/CurrencyInput.props.ts

@@ -8,8 +8,8 @@ export interface CurrencyInputBaseProps {
   placeholder?: string;
   inBottomSheet?: boolean;
   required?: boolean;
-  /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-  autoFormatThousands?: boolean;
+  /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+  disableGroupSeparator?: boolean;
 }
 
 export type CurrencyInputProps = CurrencyInputBaseProps &

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -37,10 +37,10 @@ const meta = {
       description: 'Focused',
       defaultValue: false,
     },
-    autoFormatThousands: {
+    disableGroupSeparator: {
       control: 'boolean',
       description:
-        'Automatically add thousand separators while typing _(Only works with controlled components via onTextChange)_',
+        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onTextChange)_',
       defaultValue: false,
     },
   },
@@ -50,26 +50,28 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
-    autoFormatThousands: false,
+    disableGroupSeparator: false,
   },
 } satisfies Meta<typeof CurrencyInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: args => {
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
 
-export const AutoFormatThousands: Story = {
+export const DisableGroupSeparator: Story = {
   parameters: {
-    controls: { include: ['autoFormatThousands'] },
+    controls: { include: ['disableGroupSeparator'] },
   },
-  args: { autoFormatThousands: true },
+  args: { disableGroupSeparator: true },
   render: args => {
-    const [value, setValue] = useState('1234.56');
-    const handleChange = (val: string) => {
-      setValue(val);
-    };
-    return <CurrencyInput {...args} value={value} onChangeText={handleChange} />;
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
   },
 };
 
@@ -105,10 +107,10 @@ export const States: Story = {
           <CurrencyInput disabled />
         </VariantTitle>
         <VariantTitle title="Readonly">
-          <CurrencyInput readonly />
+          <CurrencyInput readonly value="11666"/>
         </VariantTitle>
-        <VariantTitle title="Auto format thousands">
-          <CurrencyInput autoFormatThousands value="1234.56" />
+        <VariantTitle title="Disable auto format thousands">
+          <CurrencyInput disableGroupSeparator value="1234.56" />
         </VariantTitle>
       </Flex>
     );

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -14,7 +14,7 @@ const CurrencyInput = ({
   placeholder,
   inBottomSheet = false,
   required,
-  autoFormatThousands = false,
+  disableGroupSeparator = false,
   value,
   onChangeText,
   ...rest
@@ -27,7 +27,7 @@ const CurrencyInput = ({
   const getPlaceholder = placeholder ?? defaultFormat;
 
   const handleChangeText = (text: string) => {
-    if (autoFormatThousands) {
+    if (!disableGroupSeparator) {
       const formatted = formatThousands(text);
       onChangeText?.(formatted);
     } else {
@@ -36,7 +36,7 @@ const CurrencyInput = ({
   };
 
   const displayValue =
-    autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
 
   return (
     <Input

package/src/components/DescriptionList/DescriptionList.docs.mdx

@@ -32,7 +32,11 @@ Display pairs of related metadata (heading + description). Supports column (stac
   >
     <DescriptionListItem heading="Account Number" description="123456789" />
     <DescriptionListItem heading="Sort Code" description="12-34-56" />
-    <DescriptionListItem heading="Status" description="Active" />
+    <DescriptionListItem
+      heading="Status"
+      description="Inactive"
+      invalidText="Status cannot be inactive"
+    />
   </DescriptionList>
 </UsageWrap>
 
@@ -42,7 +46,11 @@ import { DescriptionList, DescriptionListItem } from '@utilitywarehouse/hearth-r
 <DescriptionList direction="column" heading="Account details" helperText="Static account metadata">
   <DescriptionListItem heading="Account Number" description="123456789" />
   <DescriptionListItem heading="Sort Code" description="12-34-56" />
-  <DescriptionListItem heading="Status" description="Active" />
+  <DescriptionListItem
+    heading="Status"
+    description="Inactive"
+    invalidText="Status cannot be inactive"
+  />
 </DescriptionList>;
 ```
 
@@ -50,34 +58,23 @@ import { DescriptionList, DescriptionListItem } from '@utilitywarehouse/hearth-r
 
 ### DescriptionList
 
-| Prop               | Type                                         | Description                                      | Default     |
-| ------------------ | -------------------------------------------- | ------------------------------------------------ | ----------- |
-| `direction`        | `'row' \| 'column'`                          | Layout orientation                               | `column`    |
-| `itemHeadingWidth` | `number`                                     | Override heading column width in row layout      | token value |
-| `heading`          | `string`                                     | Optional overall heading (renders SectionHeader) | -           |
-| `helperText`       | `string`                                     | Supporting text under heading                    | -           |
-| `linkText`         | `string`                                     | Section header link text                         | -           |
-| `linkHref`         | `string`                                     | Header link URL (web)                            | -           |
-| `linkIcon`         | `ComponentType`                              | Header link icon                                 | -           |
-| `linkIconPosition` | `'left' \| 'right'`                          | Header link icon position                        | `right`     |
-| `linkOnPress`      | `() => void`                                 | Header link press handler                        | -           |
-| `linkTarget`       | `'_blank' \| '_self' \| '_parent' \| '_top'` | Header link target                               | `_self`     |
-| `linkShowIcon`     | `boolean`                                    | Whether header link icon is shown                | `false`     |
+| Prop                    | Type                | Description                                      | Default     |
+| ----------------------- | ------------------- | ------------------------------------------------ | ----------- |
+| `direction`             | `'row' \| 'column'` | Layout orientation                               | `column`    |
+| `itemHeadingWidth`      | `number`            | Override heading column width in row layout      | token value |
+| `heading`               | `string`            | Optional overall heading (renders SectionHeader) | -           |
+| `helperText`            | `string`            | Supporting text under heading                    | -           |
+| `headerTrailingContent` | `ReactNode`         | Custom trailing content for heading (e.g. Link)  | -           |
 
 ### DescriptionListItem
 
-| Prop               | Type                                         | Description                                  | Default    |
-| ------------------ | -------------------------------------------- | -------------------------------------------- | ---------- |
-| `heading`          | `ReactNode`                                  | Heading (label) content                      | (required) |
-| `description`      | `ReactNode`                                  | Description (value) content                  | (required) |
-| `headingWidth`     | `number`                                     | Per-item heading width override (row layout) | inherits   |
-| `linkText`         | `string`                                     | Inline action link text                      | -          |
-| `linkHref`         | `string`                                     | Inline action link URL (web)                 | -          |
-| `linkIcon`         | `ComponentType`                              | Inline action link icon                      | -          |
-| `linkIconPosition` | `'left' \| 'right'`                          | Inline link icon position                    | `right`    |
-| `linkOnPress`      | `() => void`                                 | Inline link press handler                    | -          |
-| `linkTarget`       | `'_blank' \| '_self' \| '_parent' \| '_top'` | Inline link target                           | `_self`    |
-| `linkShowIcon`     | `boolean`                                    | Show inline link icon                        | `false`    |
+| Prop              | Type        | Description                                      | Default    |
+| ----------------- | ----------- | ------------------------------------------------ | ---------- |
+| `heading`         | `ReactNode` | Heading (label) content                          | (required) |
+| `description`     | `ReactNode` | Description (value) content                      | (required) |
+| `headingWidth`    | `number`    | Per-item heading width override (row layout)     | inherits   |
+| `trailingContent` | `ReactNode` | Optional trailing content (e.g. Link, Button)    | -          |
+| `invalidText`     | `string`    | Text to show under description for invalid value | -          |
 
 > Uses `theme.components.descriptionList` tokens for spacing & column width.
 

package/src/components/DescriptionList/DescriptionList.props.ts

@@ -1,4 +1,3 @@
-import { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 
 export interface DescriptionListProps extends ViewProps {
@@ -8,13 +7,7 @@ export interface DescriptionListProps extends ViewProps {
   itemHeadingWidth?: number;
   heading?: string;
   helperText?: string;
-  linkText?: string;
-  linkHref?: string;
-  linkIcon?: ComponentType;
-  linkIconPosition?: 'left' | 'right';
-  linkOnPress?: () => void;
-  linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  linkShowIcon?: boolean;
+  headerTrailingContent?: React.ReactNode;
 }
 
 export default DescriptionListProps;

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { DescriptionList, DescriptionListItem } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
+import { Link } from '../Link';
 
 const meta: Meta<typeof DescriptionList> = {
   title: 'Stories / DescriptionList',
@@ -26,19 +27,6 @@ const meta: Meta<typeof DescriptionList> = {
       control: 'text',
       description: 'Supporting text shown under heading (Playground only).',
     },
-    linkText: { control: 'text', description: 'Header link text (Playground only).' },
-    linkHref: { control: 'text', description: 'Header link href (web).' },
-    linkIconPosition: {
-      control: 'select',
-      options: ['left', 'right'],
-      description: 'Header link icon position.',
-    },
-    linkShowIcon: { control: 'boolean', description: 'Show header link icon.' },
-    linkTarget: {
-      control: 'select',
-      options: ['_blank', '_self', '_parent', '_top'],
-      description: 'Header link target (web).',
-    },
   },
   args: {
     direction: 'column',
@@ -53,7 +41,7 @@ type Story = StoryObj<typeof meta>;
 const sampleData = [
   { heading: 'Account Number', description: '123456789' },
   { heading: 'Sort Code', description: '12-34-56' },
-  { heading: 'Status', description: 'Active' },
+  { heading: 'Status', description: 'Inactive', invalidText: 'Status cannot be inactive' },
 ];
 
 export const Playground: Story = {
@@ -64,6 +52,7 @@ export const Playground: Story = {
           key={item.heading}
           heading={item.heading}
           description={item.description}
+          invalidText={item.invalidText}
         />
       ))}
     </DescriptionList>
@@ -79,6 +68,7 @@ export const Row: Story = {
           key={item.heading}
           heading={item.heading}
           description={item.description}
+          invalidText={item.invalidText}
         />
       ))}
     </DescriptionList>
@@ -94,6 +84,7 @@ export const Column: Story = {
           key={item.heading}
           heading={item.heading}
           description={item.description}
+          invalidText={item.invalidText}
         />
       ))}
     </DescriptionList>
@@ -111,6 +102,7 @@ export const KitchenSink: Story = {
               key={item.heading}
               heading={item.heading}
               description={item.description}
+              invalidText={item.invalidText}
             />
           ))}
         </DescriptionList>
@@ -122,6 +114,7 @@ export const KitchenSink: Story = {
               key={item.heading}
               heading={item.heading}
               description={item.description}
+              invalidText={item.invalidText}
             />
           ))}
         </DescriptionList>
@@ -138,15 +131,16 @@ export const WithLinks: Story = {
       <DescriptionListItem
         heading="Account Number"
         description="123456789"
-        linkText="Manage"
-        linkHref="https://example.com/account"
-        linkShowIcon
+        trailingContent={<Link href="https://example.com/account">Manage account</Link>}
       />
       <DescriptionListItem
         heading="Status"
         description="Active"
-        linkText="Change"
-        linkHref="https://example.com/status"
+        trailingContent={
+          <Link href="https://example.com/status" showIcon={false}>
+            Change
+          </Link>
+        }
       />
       <DescriptionListItem heading="Region" description="United Kingdom" />
     </DescriptionList>

package/src/components/DescriptionList/DescriptionList.tsx

@@ -10,13 +10,7 @@ const DescriptionList = ({
   itemHeadingWidth,
   heading,
   helperText,
-  linkText,
-  linkHref,
-  linkIcon,
-  linkIconPosition,
-  linkOnPress,
-  linkTarget,
-  linkShowIcon,
+  headerTrailingContent,
   children,
   style,
   ...props
@@ -31,13 +25,7 @@ const DescriptionList = ({
           <SectionHeader
             heading={heading}
             helperText={helperText}
-            linkText={linkText}
-            linkHref={linkHref}
-            linkIcon={linkIcon}
-            linkIconPosition={linkIconPosition}
-            linkOnPress={linkOnPress}
-            linkTarget={linkTarget}
-            linkShowIcon={linkShowIcon}
+            trailingContent={headerTrailingContent}
           />
         ) : null}
         {children}

package/src/components/DescriptionList/DescriptionListItem.props.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 
 export interface DescriptionListItemProps extends ViewProps {
@@ -7,13 +7,8 @@ export interface DescriptionListItemProps extends ViewProps {
   /** Description / value part */
   description: ReactNode;
   headingWidth?: number;
-  linkText?: string;
-  linkHref?: string;
-  linkIcon?: ComponentType;
-  linkIconPosition?: 'left' | 'right';
-  linkOnPress?: () => void;
-  linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  linkShowIcon?: boolean;
+  trailingContent?: ReactNode;
+  invalidText?: string;
 }
 
 export default DescriptionListItemProps;

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -1,8 +1,9 @@
+import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
-import { Link } from '../Link';
+import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
 import type DescriptionListItemProps from './DescriptionListItem.props';
 
@@ -10,13 +11,8 @@ const DescriptionListItem = ({
   heading,
   description,
   headingWidth,
-  linkText,
-  linkHref,
-  linkIcon,
-  linkIconPosition,
-  linkOnPress,
-  linkTarget,
-  linkShowIcon,
+  trailingContent,
+  invalidText,
   style,
   ...props
 }: DescriptionListItemProps) => {
@@ -46,21 +42,17 @@ const DescriptionListItem = ({
         </View>
         <View style={styles.descriptionWrapper}>
           {descIsText ? <BodyText>{description}</BodyText> : description}
+          {!!invalidText && (
+            <Helper
+              validationStatus="invalid"
+              showIcon
+              icon={ErrorCircleSmallIcon}
+              text={invalidText || ''}
+            />
+          )}
         </View>
       </View>
-      {linkText ? (
-        <Link
-          href={linkHref}
-          onPress={linkOnPress}
-          target={linkTarget}
-          showIcon={linkShowIcon}
-          icon={linkIcon}
-          iconPosition={linkIconPosition}
-          accessibilityRole="link"
-        >
-          {linkText}
-        </Link>
-      ) : null}
+      {trailingContent ? trailingContent : null}
     </View>
   );
 };

package/src/components/IndicatorIconButton/IndicatorIconButton.docs.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Box, Button, ButtonIcon, ButtonText, Center, IconButton } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import { IndicatorIconButton } from './';
+import * as Stories from './IndicatorIconButton.stories';
+
+<Meta title="Components / Indicator Icon Button" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-162" />
+
+# Indicator Icon Button
+
+The `IndicatorIconButton` component is used to trigger an action or event, such as opening a dialog or navigating to other screen. It extends the regular `UnstyledIconButton` with an optional red dot indicator in the top-right corner, useful for showing notifications or unread status.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <IndicatorIconButton
+      icon={BellMediumIcon}
+      onPress={() => console.log('Button pressed')}
+      indicator={true}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { IndicatorIconButton } from '@utilitywarehouse/hearth-react-native';
+import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  const handlePress = () => {
+    console.log('Button pressed');
+  };
+  return <IndicatorIconButton icon={BellMediumIcon} onPress={handlePress} indicator={true} />;
+};
+```
+
+## Props
+
+| Property    | Type         | Description                                                | Default |
+| ----------- | ------------ | ---------------------------------------------------------- | ------- |
+| `onPress`   | `() => void` | Callback function to be called when the button is pressed. | -       |
+| `pressed`   | `boolean`    | Changes the button to a pressed state.                     | `false` |
+| `indicator` | `boolean`    | Shows a red dot indicator in the top-right corner.         | `false` |
+
+## Examples
+
+### Variants
+
+<Canvas of={Stories.Variants} />
+
+### Colour icons
+
+You can pass color as the iconStyle props:
+
+```javascript
+const { color } = useTheme();
+
+return (
+  <IndicatorIconButton {...props} iconStyle={{ color: color.energyBlue[500] }} />
+)
+```
+
+It does not work on Storybook on web, only mobile.
+
+<Canvas of={Stories.Colourful} />
+
+### Adding accessability label
+
+<Canvas of={Stories.WithAccessibilityLabel} />

package/src/components/IndicatorIconButton/IndicatorIconButton.props.ts

@@ -0,0 +1,12 @@
+import { UnstyledIconButtonProps } from '../UnstyledIconButton';
+
+export type IndicatorIconButtonProps = Omit<
+  UnstyledIconButtonProps,
+  'size' | 'disabled' | 'loading'
+> & {
+  /**
+   * If `true`, displays a red dot indicator in the top-right corner.
+   * @default false
+   */
+  indicator?: boolean;
+};