@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.1

package/src/components/DatePicker/polyfill.ts

@@ -1,6 +1,6 @@
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype._toLocaleString = Date.prototype.toLocaleString;
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype.toLocaleString = function (a, b) {
   if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
     return Intl.DateTimeFormat('en-us', {
@@ -16,6 +16,6 @@ Date.prototype.toLocaleString = function (a, b) {
       .format(this)
       .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
   }
-  // @ts-ignore
+  // @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
   return this._toLocaleString(a, b);
 };

package/src/components/DatePicker/time-picker/wheel-web.tsx

@@ -121,7 +121,6 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
         return (
           <Animated.View
             key={`${displayValue?.text}-${index}`}
-            // eslint-disable-next-line react-native/no-inline-styles
             style={{
               position: 'absolute',
               height: ITEM_HEIGHT - 10,

package/src/components/DatePickerInput/DatePickerInput.figma.tsx

@@ -1,62 +1,34 @@
 import figma from '@figma/code-connect';
-import DatePickerInput from './DatePickerInput';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { DatePickerInput } from '../';
 
 figma.connect(
   DatePickerInput,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3917%3A7057',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       disabled: figma.enum('Variant', {
         Disabled: true,
       }),
-      readonly: figma.enum('Variant', {
-        'Read-only': true,
+      validationStatus: figma.enum('Variant', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      focused: figma.boolean('Focus?'),
-      placeholder: figma.string('Label'),
-      autoFocus: figma.boolean('Focus?'),
-      defaultValue: figma.string('Value'),
-      readOnly: figma.enum('Variant', {
-        'Read-only': true,
+      readonly: figma.enum('Variant', { Readonly: true }),
+      label: figma.string('Label'),
+      validText: figma.enum('Variant', {
+        Valid: figma.string('Validation'),
       }),
-      focusable: figma.boolean('Focus?'),
-      hasTVPreferredFocus: figma.boolean('Focus?'),
-      'aria-disabled': figma.enum('Variant', {
-        Disabled: true,
+      invalidText: figma.enum('Variant', {
+        Invalid: figma.string('Validation'),
+      }),
+      placeholder: figma.enum('Value type', {
+        Placeholder: figma.string('Value'),
+      }),
+      value: figma.enum('Value type', {
+        Filled: figma.string('Value'),
       }),
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper  text?'),
-      // "label": figma.string('Label'),
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "value": figma.string('Value'),
-      // "icon": figma.boolean('Icon?'),
-      // "calendar": figma.boolean('Calendar?'),
-      // "valueType": figma.enum('Value type', {
-      //   "Empty": "empty",
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // })
     },
-    example: props => (
-      <DatePickerInput
-        disabled={props.disabled}
-        readonly={props.readonly}
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        readOnly={props.readOnly}
-        focusable={props.focusable}
-      />
-    ),
+    example: props => <DatePickerInput {...props} />,
   }
 );

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -53,7 +53,6 @@ const DatePickerInput = ({
   ...rest
 }: DatePickerInputProps) => {
   const formFieldContext = useFormFieldContext();
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
   const isDisabled = formFieldContext?.disabled ?? disabled;
   const isReadonly = formFieldContext?.readonly ?? readonly;
 
@@ -168,7 +167,6 @@ const DatePickerInput = ({
     accessibilityHint: accessibilityHintProp,
     accessibilityLabel: accessibilityLabelProp,
     accessible: accessibleProp,
-    accessibilityRole: accessibilityRoleProp,
     importantForAccessibility: importantForAccessibilityProp,
     ...textInputProps
   } = rest;

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

@@ -58,23 +58,25 @@ 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                    | -           |
-| `headerTrailingContent` | `ReactNode`         | Custom trailing content for heading (e.g. Link)  | -           |
+| Prop                    | Type                | Default     | Description                                      |
+| ----------------------- | ------------------- | ----------- | ------------------------------------------------ |
+| `direction`             | `'row' \| 'column'` | `column`    | Layout orientation                               |
+| `itemHeadingWidth`      | `number`            | token value | Override heading column width in row layout      |
+| `heading`               | `string`            | -           | Optional overall heading (renders SectionHeader) |
+| `helperText`            | `string`            | -           | Supporting text under heading                    |
+| `headerTrailingContent` | `ReactNode`         | -           | Custom trailing content for heading (e.g. Link)  |
+| `invalidText`           | `string`            | -           | Text to show under section header                |
 
 ### 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   |
-| `trailingContent` | `ReactNode` | Optional trailing content (e.g. Link, Button)    | -          |
-| `invalidText`     | `string`    | Text to show under description for invalid value | -          |
+| Prop              | Type        | Default    | Description                                      |
+| ----------------- | ----------- | ---------- | ------------------------------------------------ |
+| `heading`         | `ReactNode` | (required) | Heading (label) content                          |
+| `description`     | `ReactNode` | (required) | Description (value) content                      |
+| `numericValue`    | `string`    | -          | Optional numeric value                           |
+| `headingWidth`    | `number`    | inherits   | Per-item heading width override (row layout)     |
+| `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.figma.tsx

@@ -1,23 +1,47 @@
-import React from "react"
-import DescriptionList from "./DescriptionList"
-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
- */
+import figma from '@figma/code-connect';
+import { DescriptionList } from '../';
 
 figma.connect(
   DescriptionList,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?')
+      sectionHeader: figma.boolean('Section header?', {
+        true: figma.nestedProps('Section Header', {
+          heading: figma.string('Heading'),
+          helperText: figma.boolean('Helper text?', {
+            true: figma.string('Helper text'),
+          }),
+          trailingContent: figma.boolean('Trailing content?', {
+            true: figma.nestedProps('Trailing content', {
+              headerTrailingContent: figma.instance('Variant'),
+            }),
+          }),
+          invalidText: figma.enum('State', {
+            Invalid: figma.nestedProps('Validation Text', {
+              invalidText: figma.string('Text'),
+            }),
+          }),
+        }),
+      }),
+      items: figma.children('Item'),
+      direction: figma.nestedProps('Item', {
+        direction: figma.enum('Direction', {
+          Row: 'row',
+          Column: 'column',
+        }),
+      }),
     },
-    example: (props) => <DescriptionList />,
-  },
-)
+    example: props => (
+      <DescriptionList
+        heading={props.sectionHeader?.heading}
+        helperText={props.sectionHeader?.helperText}
+        direction={props.direction?.direction}
+        headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
+        invalidText={props.sectionHeader?.invalidText?.invalidText}
+      >
+        {props.items}
+      </DescriptionList>
+    ),
+  }
+);

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

@@ -8,6 +8,7 @@ export interface DescriptionListProps extends ViewProps {
   heading?: string;
   helperText?: string;
   headerTrailingContent?: React.ReactNode;
+  invalidText?: string;
 }
 
 export default DescriptionListProps;

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

@@ -146,3 +146,27 @@ export const WithLinks: Story = {
     </DescriptionList>
   ),
 };
+
+export const WithNumericValues: Story = {
+  parameters: { controls: { include: ['direction', 'itemHeadingWidth'] } },
+  args: { direction: 'row' },
+  render: args => (
+    <DescriptionList {...args}>
+      <DescriptionListItem
+        heading="Account Balance"
+        description="Current balance"
+        numericValue="£5,432.10"
+      />
+      <DescriptionListItem
+        heading="Available Credit"
+        description="Credit limit minus current balance"
+        numericValue="£1,234.56"
+      />
+      <DescriptionListItem
+        heading="Minimum Payment"
+        description="Amount due by next statement date"
+        numericValue="£123.45"
+      />
+    </DescriptionList>
+  ),
+};

package/src/components/DescriptionList/DescriptionList.tsx

@@ -13,6 +13,7 @@ const DescriptionList = ({
   headerTrailingContent,
   children,
   style,
+  invalidText,
   ...props
 }: DescriptionListProps) => {
   styles.useVariants({ direction });
@@ -26,6 +27,7 @@ const DescriptionList = ({
             heading={heading}
             helperText={helperText}
             trailingContent={headerTrailingContent}
+            invalidText={invalidText}
           />
         ) : null}
         {children}

package/src/components/DescriptionList/DescriptionListItem.figma.tsx

@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect';
+import { DescriptionListItem } from '../';
+
+figma.connect(
+  DescriptionListItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7247-5209&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      heading: figma.string('Heading'),
+      direction: figma.enum('Direction', {
+        Row: 'row',
+        Column: 'column',
+      }),
+      description: figma.boolean('Description?', {
+        true: figma.string('Description'),
+      }),
+      trailingContent: figma.boolean('Trailing content?', {
+        true: figma.nestedProps('Trailing content', {
+          trailingContent: figma.instance('Variant'),
+        }),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.nestedProps('Validation Text', {
+          invalidText: figma.string('Text'),
+        }),
+      }),
+      numericValue: figma.boolean('Numerical value?', {
+        true: figma.string('Numerical value'),
+      }),
+    },
+    example: props => (
+      <DescriptionListItem
+        heading={props.heading}
+        description={props.description}
+        direction={props.direction}
+        trailingContent={props.trailingContent?.trailingContent}
+        invalidText={props.invalidText?.invalidText}
+        numericValue={props.numericValue}
+      />
+    ),
+  }
+);

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

@@ -9,6 +9,7 @@ export interface DescriptionListItemProps extends ViewProps {
   headingWidth?: number;
   trailingContent?: ReactNode;
   invalidText?: string;
+  numericValue?: string;
 }
 
 export default DescriptionListItemProps;

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
+import { DetailText } from '../DetailText';
 import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
 import type DescriptionListItemProps from './DescriptionListItem.props';
@@ -13,6 +14,7 @@ const DescriptionListItem = ({
   headingWidth,
   trailingContent,
   invalidText,
+  numericValue,
   style,
   ...props
 }: DescriptionListItemProps) => {
@@ -51,6 +53,11 @@ const DescriptionListItem = ({
             />
           )}
         </View>
+        {numericValue ? (
+          <View style={styles.descriptionWrapper}>
+            <DetailText size="lg">{numericValue}</DetailText>
+          </View>
+        ) : null}
       </View>
       {trailingContent ? trailingContent : null}
     </View>

package/src/components/Divider/Divider.figma.tsx

@@ -1,25 +1,12 @@
-import React from "react"
-import Divider from "./Divider"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import Divider from './Divider';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Divider,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      orientation: figma.enum("Orientation", {
-        Horizontal: "horizontal",
-        Vertical: "vertical",
-      }),
-    },
-    example: (props) => <Divider orientation={props.orientation} />,
+figma.connect(Divider, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687', {
+  props: {
+    orientation: figma.enum('Orientation', {
+      Horizontal: 'horizontal',
+      Vertical: 'vertical',
+    }),
   },
-)
+  example: props => <Divider orientation={props.orientation} />,
+});

package/src/components/Input/Input.tsx

@@ -43,7 +43,6 @@ const Input = forwardRef<TextInput, InputProps>(
       type,
       showPasswordToggle = true,
       onClear,
-      format,
       loading,
       clearable = false,
       required = true,

package/src/components/List/List.stories.tsx

@@ -9,7 +9,7 @@ import {
   SettingsMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { FC, PropsWithChildren, useState } from 'react';
+import { useState } from 'react';
 import { List, ListAction, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Badge } from '../Badge';
@@ -18,9 +18,6 @@ import { Flex } from '../Flex';
 import { IconContainer } from '../IconContainer';
 import { Link } from '../Link';
 import { Switch } from '../Switch';
-// import { Card } from '../Card';
-
-const Card: FC<PropsWithChildren> = ({ children }) => <div>{children}</div>;
 
 const meta = {
   title: 'Stories / List',

package/src/components/Radio/Radio.stories.tsx

@@ -96,7 +96,7 @@ export const WithImage: Story = {
     value: 'Option 1',
     label: 'Label',
   },
-  render: ({ children, ...args }) => (
+  render: ({ ...args }) => (
     <RadioGroup>
       <Radio
         aria-label="Label 1"

package/src/components/Switch/Switch.tsx

@@ -23,7 +23,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components, color } = useTheme();
+  const { components } = useTheme();
   const theme = useAnimatedTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =

package/src/components/Tabs/Tabs.tsx

@@ -11,7 +11,6 @@ const Tabs = ({
   size = 'md',
   disabled,
   children,
-  withPanels,
   ...props
 }: TabsProps) => {
   // Collect child tab values

package/src/components/Textarea/Textarea.tsx

@@ -58,6 +58,9 @@ const Textarea = ({
 
   const getAccessibilityHint = () => {
     let accessibilityHint = '';
+    if (textareaHelperText) {
+      accessibilityHint = accessibilityHint + textareaHelperText;
+    }
     if (textareaValidationStatus !== 'initial') {
       if (accessibilityHint.length > 0) {
         accessibilityHint = accessibilityHint + ', ';

package/src/components/ThemedImage/ThemedImage.stories.tsx

@@ -33,9 +33,9 @@ export const Playground: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         light={<SpotBillingLight width={200} height={200} />}
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         dark={<SpotBillingDark width={200} height={200} />}
       />
     </Box>
@@ -49,9 +49,9 @@ export const WithSpotIllustrations: Story = {
   render: () => (
     <Box flexDirection="row" flexWrap="wrap" gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={120} height={120} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={120} height={120} />}
       />
     </Box>
@@ -81,9 +81,9 @@ export const WithSceneIllustrations: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        //  @ts-ignore
+        //  @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SceneBroadbandLight width={300} height={200} />}
-        //  @ts-ignore
+        //  @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SceneBroadbandDark width={300} height={200} />}
       />
     </Box>
@@ -129,21 +129,21 @@ export const WithCustomSize: Story = {
   render: () => (
     <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={80} height={80} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={80} height={80} />}
       />
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={120} height={120} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={120} height={120} />}
       />
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={160} height={160} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={160} height={160} />}
       />
     </Box>
@@ -163,9 +163,9 @@ export const WithAccessibility: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         light={<MascotEnergyLight width={150} height={150} />}
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         dark={<MascotEnergyDark width={150} height={150} />}
         accessible={true}
         accessibilityLabel="Energy service mascot illustration"

package/src/components/Toast/ToastItem.tsx

@@ -45,7 +45,7 @@ const ToastItem = forwardRef<ToastItemHandle, Props>(({ toast, onClose }, ref) =
     }, 100);
 
     return () => clearTimeout(timer);
-  }, [toast.text, toast.actionText]);
+  }, [toast.text, toast.actionText, translateY, opacity]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value + gestureTranslateY.value }],

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -19,7 +19,7 @@ const ButtonIcon = ({
       {...props}
       style={
         Platform.OS === 'web'
-          ? // @ts-ignore
+          ? // @ts-expect-error - Spread types may only be created from object types.
             { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -1,6 +1,5 @@
 import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardPressHandlerContext } from '../Card';
 import type { ToggleButtonProps } from './ToggleButton.props';
 
 const ButtonRoot = ({
@@ -12,7 +11,6 @@ const ButtonRoot = ({
   ...props
 }: ToggleButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || {};
-  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     toggled,

package/src/components/UnstyledIconButton/UnstyledIconButtonIcon.tsx

@@ -12,7 +12,7 @@ const UnstyledIconButtonIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? // @ts-ignore
+          ? // @ts-expect-error - Spread types may only be created from object types.
             { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }

package/src/utils/coloursAsArray.ts

@@ -1,6 +1,6 @@
 import { color } from '../tokens';
 
-const { light, dark, ...restOfColors } = color;
+const { light, ...restOfColors } = color;
 
 /**
  * Recursively flatten nested color objects into camelCase keys

package/tsconfig.eslint.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./src",
+    "./src/**/*.stories.tsx",
+    "./src/**/*.figma.tsx",
+    "./.storybook/**/*",
+    "./docs/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}