@utilitywarehouse/hearth-react-native 0.22.1 → 0.23.0-test-list

package/build/components/VerificationInput/VerificationInput.utils.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
+describe('findDiffIndex', () => {
+    it('returns first differing index', () => {
+        expect(findDiffIndex('12', '19')).toBe(1);
+    });
+    it('returns previous length when next appends', () => {
+        expect(findDiffIndex('12', '123')).toBe(2);
+    });
+    it('returns next length when next shortens with same prefix', () => {
+        expect(findDiffIndex('123', '12')).toBe(2);
+    });
+});
+describe('getNextIndexFromValueChange', () => {
+    it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12',
+            nextValue: '123',
+            length: 6,
+        })).toBe(3);
+    });
+    it('caps at length when value becomes full', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12345',
+            nextValue: '123456',
+            length: 6,
+        })).toBe(6);
+    });
+    it('stays at edited index for deletions', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '123',
+            nextValue: '12',
+            length: 6,
+        })).toBe(2);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.22.1",
+  "version": "0.23.0-test-list",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,8 +55,8 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"

package/src/components/List/List.tsx

@@ -14,7 +14,8 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none' } = props;
+  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -51,7 +52,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...props} style={[styles.container, props.style]}>
+      <View {...rest} style={[styles.container, style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -61,10 +62,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View>{children}</View>
+          <View testID={testID}>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card}>
+            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
               <>{children}</>
             </Card>
           )

package/src/components/Modal/Modal.docs.mdx

@@ -109,6 +109,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
 | `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
+| `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 

package/src/components/Modal/Modal.props.ts

@@ -25,6 +25,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  background?: 'default' | 'brand';
 }
 
 export default ModalProps;

package/src/components/Modal/Modal.stories.tsx

@@ -66,6 +66,7 @@ const meta = {
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
+    background: 'brand',
   },
 } satisfies Meta<typeof Modal>;
 

package/src/components/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -50,6 +50,7 @@ const Modal = ({
   closeButtonProps,
   inNavModal = false,
   stickyFooter = true,
+  background = 'default',
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -170,6 +171,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
+    background: background === 'brand' ? 'brand' : 'primary',
   });
 
   const footer = (
@@ -178,6 +180,7 @@ const Modal = ({
         <Button
           onPress={handlePrimaryButtonPress}
           text={primaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...primaryButtonProps}
           variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
           colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -187,6 +190,7 @@ const Modal = ({
         <Button
           onPress={handleSecondaryButtonPress}
           text={secondaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...secondaryButtonProps}
           variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
           colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -232,6 +236,7 @@ const Modal = ({
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
+                inverted={background === 'brand' && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -253,7 +258,7 @@ const Modal = ({
               </View>
             </View>
           ) : null}
-          {children}
+          {inNavModal ? <ScrollView style={{ flex: 1 }}>{children}</ScrollView> : children}
           {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
@@ -277,7 +282,12 @@ const Modal = ({
   );
 
   return inNavModal ? (
-    <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+      }}
+    >
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
           <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
@@ -420,6 +430,14 @@ const styles = StyleSheet.create((theme, rt) => ({
     gap: theme.components.modal.gap,
     padding: theme.components.modal.padding,
     paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+    variants: {
+      background: {
+        primary: {},
+        brand: {
+          backgroundColor: theme.color.background.brand,
+        },
+      },
+    },
   },
   androidContainer: {
     height: rt.insets.top + 18,

package/.turbo/turbo-lint.log

@@ -1,72 +0,0 @@
-
-> @utilitywarehouse/hearth-react-native@0.22.1 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
-  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   73:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  269:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
-  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
-  174:7  warning  React Hook useImperativeHandle has a missing dependency: 'updateValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-✖ 25 problems (0 errors, 25 warnings)
-
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1480.154 |    63.5%
-no-global-assign                          |    86.111 |     3.7%
-react-hooks/exhaustive-deps               |    81.893 |     3.5%
-react-hooks/rules-of-hooks                |    58.807 |     2.5%
-no-misleading-character-class             |    53.302 |     2.3%
-@typescript-eslint/ban-ts-comment         |    49.364 |     2.1%
-no-unexpected-multiline                   |    36.564 |     1.6%
-no-fallthrough                            |    32.890 |     1.4%
-@typescript-eslint/triple-slash-reference |    30.004 |     1.3%
-no-regex-spaces                           |    26.454 |     1.1%