@utilitywarehouse/hearth-react-native 0.32.4 โ 0.32.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.ts +0 -10
- package/.storybook/vitest.setup.ts +0 -8
- package/.turbo/turbo-build.log +1 -0
- package/CHANGELOG.md +12 -0
- package/build/components/Accordion/Accordion.d.ts +1 -1
- package/build/components/Modal/Modal.d.ts +1 -1
- package/build/components/Modal/Modal.js +2 -2
- package/build/components/Modal/Modal.shared.types.d.ts +1 -0
- package/build/components/Modal/Modal.web.d.ts +1 -1
- package/build/components/Modal/Modal.web.js +2 -2
- package/docs/changelog.mdx +6 -0
- package/package.json +11 -6
- package/src/components/Modal/Modal.docs.mdx +1 -0
- package/src/components/Modal/Modal.shared.types.ts +1 -0
- package/src/components/Modal/Modal.tsx +3 -0
- package/src/components/Modal/Modal.web.tsx +3 -0
- package/src/components/Rating/Rating.figma.tsx +1 -1
- package/vitest.config.js +3 -0
- package/.turbo/turbo-lint$colon$fix.log +0 -56
package/.storybook/main.ts
CHANGED
|
@@ -71,16 +71,6 @@ const config = {
|
|
|
71
71
|
...config.optimizeDeps,
|
|
72
72
|
exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
|
|
73
73
|
},
|
|
74
|
-
build: {
|
|
75
|
-
...config.build,
|
|
76
|
-
rolldownOptions: {
|
|
77
|
-
...config.build?.rolldownOptions,
|
|
78
|
-
external: [
|
|
79
|
-
...(config.build?.rolldownOptions?.external || []),
|
|
80
|
-
'@react-stately/utils',
|
|
81
|
-
],
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
74
|
};
|
|
85
75
|
},
|
|
86
76
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { setProjectAnnotations } from '@storybook/react-native-web-vite';
|
|
2
1
|
import { vi } from 'vitest';
|
|
3
2
|
|
|
4
3
|
// react-native-unistyles/mocks relies on Jest globals.
|
|
@@ -30,10 +29,3 @@ StyleSheet.configure({
|
|
|
30
29
|
adaptiveThemes: false,
|
|
31
30
|
},
|
|
32
31
|
});
|
|
33
|
-
|
|
34
|
-
const a11yAddonAnnotations = await import('@storybook/addon-a11y/preview');
|
|
35
|
-
const projectAnnotations = await import('./preview');
|
|
36
|
-
|
|
37
|
-
// This is an important step to apply the right configuration when testing your stories.
|
|
38
|
-
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
|
39
|
-
setProjectAnnotations([a11yAddonAnnotations as any, projectAnnotations as any]);
|
package/.turbo/turbo-build.log
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @utilitywarehouse/hearth-react-native
|
|
2
2
|
|
|
3
|
+
## 0.32.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1436](https://github.com/utilitywarehouse/hearth/pull/1436) [`3dedc17`](https://github.com/utilitywarehouse/hearth/commit/3dedc175984018e0f376597eabe5d078168ca435) Thanks [@fillyD](https://github.com/fillyD)! - Add a `testID` prop to `Modal`, applied to the modal content container
|
|
8
|
+
|
|
9
|
+
## 0.32.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#1261](https://github.com/utilitywarehouse/hearth/pull/1261) [`745df73`](https://github.com/utilitywarehouse/hearth/commit/745df73a245dfe89d07aae5bac14256a4ff89e0a) Thanks [@robphoenix](https://github.com/robphoenix)! - ๐งน [HOUSEKEEPING]: Update dependencies
|
|
14
|
+
|
|
3
15
|
## 0.32.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -5,7 +5,7 @@ export declare const AccordionTrigger: import("react").ForwardRefExoticComponent
|
|
|
5
5
|
states?: {
|
|
6
6
|
active?: boolean;
|
|
7
7
|
};
|
|
8
|
-
}, "children"> & import("@gluestack-ui/accordion/lib/
|
|
8
|
+
}, "children"> & import("@gluestack-ui/accordion/lib/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native/types").PressableProps & {
|
|
9
9
|
states?: {
|
|
10
10
|
active?: boolean;
|
|
11
11
|
};
|
|
@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
|
|
|
3
3
|
type Modal<T = any> = BottomSheetModalMethods<T> & {
|
|
4
4
|
triggerCloseAnimation?: () => void;
|
|
5
5
|
};
|
|
6
|
-
declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export default Modal;
|
|
@@ -12,7 +12,7 @@ import { Button } from '../Button';
|
|
|
12
12
|
import { Heading } from '../Heading';
|
|
13
13
|
import { Spinner } from '../Spinner';
|
|
14
14
|
import { UnstyledIconButton } from '../UnstyledIconButton';
|
|
15
|
-
const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
|
|
15
|
+
const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, testID, ...props }) => {
|
|
16
16
|
const theme = useTheme();
|
|
17
17
|
const bottomSheetModalRef = useRef(null);
|
|
18
18
|
const viewRef = useRef(null);
|
|
@@ -88,7 +88,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
|
|
|
88
88
|
secondaryButtonProps,
|
|
89
89
|
secondaryButtonText,
|
|
90
90
|
]);
|
|
91
|
-
const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
|
|
91
|
+
const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
|
|
92
92
|
const renderFooter = useCallback((bottomSheetFooterProps) => (_jsx(BottomSheetFooter, { ...bottomSheetFooterProps, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })), [footerContent, footerStyle, handleStickyFooterLayout]);
|
|
93
93
|
return (_jsxs(_Fragment, { children: [stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (_jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: styles.footerMeasurementContainer, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })) : null, _jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && shouldShowFooter ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: [
|
|
94
94
|
styles.scrollView,
|
|
@@ -3,6 +3,7 @@ import { StyleProp, ViewProps, ViewStyle } from 'react-native';
|
|
|
3
3
|
import { ButtonWithoutChildrenProps } from '../Button/Button.props';
|
|
4
4
|
import { UnstyledIconButtonProps } from '../UnstyledIconButton';
|
|
5
5
|
export interface ModalCommonBaseProps {
|
|
6
|
+
testID?: string;
|
|
6
7
|
loading?: boolean;
|
|
7
8
|
image?: ReactNode;
|
|
8
9
|
showCloseButton?: boolean;
|
|
@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
|
|
|
3
3
|
type Modal<T = any> = BottomSheetModalMethods<T> & {
|
|
4
4
|
triggerCloseAnimation?: () => void;
|
|
5
5
|
};
|
|
6
|
-
declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export default Modal;
|
|
@@ -9,7 +9,7 @@ import { Button } from '../Button';
|
|
|
9
9
|
import { Heading } from '../Heading';
|
|
10
10
|
import { Spinner } from '../Spinner';
|
|
11
11
|
import { UnstyledIconButton } from '../UnstyledIconButton';
|
|
12
|
-
const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
|
|
12
|
+
const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }) => {
|
|
13
13
|
const bottomSheetModalRef = useRef(null);
|
|
14
14
|
const viewRef = useRef(null);
|
|
15
15
|
const scrollViewRef = useRef(null);
|
|
@@ -60,7 +60,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
|
|
|
60
60
|
const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
|
|
61
61
|
const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
|
|
62
62
|
const footerContent = footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
|
|
63
|
-
const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
|
|
63
|
+
const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
|
|
64
64
|
return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
|
|
65
65
|
};
|
|
66
66
|
const styles = StyleSheet.create(theme => ({
|
package/docs/changelog.mdx
CHANGED
|
@@ -9,6 +9,12 @@ import { BackToTopButton, NextPrevPage } from './components';
|
|
|
9
9
|
The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
## 0.32.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#1261](https://github.com/utilitywarehouse/hearth/pull/1261) [`745df73`](https://github.com/utilitywarehouse/hearth/commit/745df73a245dfe89d07aae5bac14256a4ff89e0a) Thanks [@robphoenix](https://github.com/robphoenix)! - ๐งน [HOUSEKEEPING]: Update dependencies
|
|
17
|
+
|
|
12
18
|
## 0.32.4
|
|
13
19
|
|
|
14
20
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utilitywarehouse/hearth-react-native",
|
|
3
|
-
"version": "0.32.
|
|
3
|
+
"version": "0.32.6",
|
|
4
4
|
"description": "Utility Warehouse React Native UI library",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/utilitywarehouse/hearth.git",
|
|
8
|
+
"directory": "packages/react-native"
|
|
9
|
+
},
|
|
5
10
|
"main": "build/index.js",
|
|
6
11
|
"types": "build/index.d.ts",
|
|
7
12
|
"module": "build/index",
|
|
8
13
|
"type": "module",
|
|
9
14
|
"sideEffects": false,
|
|
10
15
|
"dependencies": {
|
|
11
|
-
"@gluestack-ui/accordion": "1.0.
|
|
16
|
+
"@gluestack-ui/accordion": "1.0.14",
|
|
12
17
|
"@gluestack-ui/alert": "0.1.15",
|
|
13
18
|
"@gluestack-ui/button": "1.0.7",
|
|
14
19
|
"@gluestack-ui/checkbox": "0.1.32",
|
|
@@ -22,6 +27,7 @@
|
|
|
22
27
|
"@gluestack-ui/switch": "0.1.22",
|
|
23
28
|
"@gluestack-ui/textarea": "0.1.23",
|
|
24
29
|
"@quidone/react-native-wheel-picker": "^1.6.1",
|
|
30
|
+
"@react-stately/utils": "^3.12.1",
|
|
25
31
|
"dayjs": "^1.11.13",
|
|
26
32
|
"nanoid": "3.3.11"
|
|
27
33
|
},
|
|
@@ -30,7 +36,6 @@
|
|
|
30
36
|
"@chromatic-com/storybook": "^4.1.3",
|
|
31
37
|
"@figma/code-connect": "^1.3.12",
|
|
32
38
|
"@gorhom/bottom-sheet": "5.2.6",
|
|
33
|
-
"@react-stately/utils": "^3.12.0",
|
|
34
39
|
"@storybook/addon-a11y": "^10.2.1",
|
|
35
40
|
"@storybook/addon-docs": "^10.2.1",
|
|
36
41
|
"@storybook/addon-vitest": "^10.2.1",
|
|
@@ -64,10 +69,10 @@
|
|
|
64
69
|
"vite-plugin-svgr": "^4.5.0",
|
|
65
70
|
"vitest": "^3.2.4",
|
|
66
71
|
"@utilitywarehouse/hearth-fonts": "^0.0.4",
|
|
72
|
+
"@utilitywarehouse/hearth-svg-assets": "^0.6.2",
|
|
67
73
|
"@utilitywarehouse/hearth-react-icons": "^0.8.2",
|
|
68
74
|
"@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
|
|
69
|
-
"@utilitywarehouse/hearth-
|
|
70
|
-
"@utilitywarehouse/hearth-tokens": "^0.2.4"
|
|
75
|
+
"@utilitywarehouse/hearth-tokens": "^0.3.0"
|
|
71
76
|
},
|
|
72
77
|
"peerDependencies": {
|
|
73
78
|
"@gorhom/bottom-sheet": ">=5.0.0",
|
|
@@ -82,7 +87,7 @@
|
|
|
82
87
|
"react-native-web": ">=0.19"
|
|
83
88
|
},
|
|
84
89
|
"scripts": {
|
|
85
|
-
"clean": "rm -rf node_modules
|
|
90
|
+
"clean": "rm -rf node_modules build .turbo",
|
|
86
91
|
"generateColours": "node ./scripts/generateColours.js",
|
|
87
92
|
"copyTokens": "node ./scripts/copyTokens.js",
|
|
88
93
|
"copy:changelog": "node ./scripts/copyChangelog.js",
|
|
@@ -117,6 +117,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
|
|
|
117
117
|
| `footerStyle` | `StyleProp<ViewStyle>` | Styles applied to the footer container, useful for sticky footer shadows or custom spacing | - |
|
|
118
118
|
| `closeButtonProps` | `Omit<UnstyledIconButtonProps, 'children'>` | Additional props to pass to the close button | - |
|
|
119
119
|
| `fullscreen` | `boolean` | Whether the modal should take up the full screen height | `false` |
|
|
120
|
+
| `testID` | `string` | Applied to the modal content container, useful for locating the modal in e2e tests | - |
|
|
120
121
|
|
|
121
122
|
When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
|
|
122
123
|
|
|
@@ -4,6 +4,7 @@ import { ButtonWithoutChildrenProps } from '../Button/Button.props';
|
|
|
4
4
|
import { UnstyledIconButtonProps } from '../UnstyledIconButton';
|
|
5
5
|
|
|
6
6
|
export interface ModalCommonBaseProps {
|
|
7
|
+
testID?: string;
|
|
7
8
|
loading?: boolean;
|
|
8
9
|
image?: ReactNode;
|
|
9
10
|
showCloseButton?: boolean;
|
|
@@ -45,6 +45,7 @@ const Modal = ({
|
|
|
45
45
|
secondaryButtonProps,
|
|
46
46
|
closeButtonProps,
|
|
47
47
|
stickyFooter = true,
|
|
48
|
+
testID,
|
|
48
49
|
...props
|
|
49
50
|
}: ModalProps) => {
|
|
50
51
|
const theme = useTheme();
|
|
@@ -168,6 +169,7 @@ const Modal = ({
|
|
|
168
169
|
{loading ? (
|
|
169
170
|
<View
|
|
170
171
|
style={styles.loadingContainer}
|
|
172
|
+
testID={testID}
|
|
171
173
|
accessible={Platform.OS === 'android' ? true : undefined}
|
|
172
174
|
accessibilityLabel={Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined}
|
|
173
175
|
accessibilityHint={
|
|
@@ -185,6 +187,7 @@ const Modal = ({
|
|
|
185
187
|
) : (
|
|
186
188
|
<View
|
|
187
189
|
style={styles.container}
|
|
190
|
+
testID={testID}
|
|
188
191
|
accessible={Platform.OS === 'android' ? true : undefined}
|
|
189
192
|
accessibilityLabel={Platform.OS === 'android' ? 'Modal content' : undefined}
|
|
190
193
|
screenReaderFocusable
|
|
@@ -36,6 +36,7 @@ const Modal = ({
|
|
|
36
36
|
primaryButtonProps,
|
|
37
37
|
secondaryButtonProps,
|
|
38
38
|
closeButtonProps,
|
|
39
|
+
testID,
|
|
39
40
|
...props
|
|
40
41
|
}: ModalProps) => {
|
|
41
42
|
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
|
|
@@ -125,6 +126,7 @@ const Modal = ({
|
|
|
125
126
|
{loading ? (
|
|
126
127
|
<View
|
|
127
128
|
style={styles.loadingContainer}
|
|
129
|
+
testID={testID}
|
|
128
130
|
accessible={Platform.OS === 'android' ? true : undefined}
|
|
129
131
|
accessibilityLabel={Platform.OS === 'android' ? 'Loading' : undefined}
|
|
130
132
|
screenReaderFocusable
|
|
@@ -138,6 +140,7 @@ const Modal = ({
|
|
|
138
140
|
) : (
|
|
139
141
|
<View
|
|
140
142
|
style={styles.container}
|
|
143
|
+
testID={testID}
|
|
141
144
|
accessible={Platform.OS === 'android' ? true : undefined}
|
|
142
145
|
accessibilityLabel={Platform.OS === 'android' ? 'Modal content' : undefined}
|
|
143
146
|
screenReaderFocusable
|
|
@@ -23,7 +23,7 @@ figma.connect(
|
|
|
23
23
|
Rating,
|
|
24
24
|
'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10620-4185',
|
|
25
25
|
{
|
|
26
|
-
variant: { Variant: 'Emojis' },
|
|
26
|
+
// variant: { Variant: 'Emojis' },
|
|
27
27
|
props: {
|
|
28
28
|
value: figma.enum('Rating', {
|
|
29
29
|
'0 Star': 0,
|
package/vitest.config.js
CHANGED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
$ TIMING=1 eslint --fix .
|
|
2
|
-
|
|
3
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
|
|
4
|
-
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
|
|
5
|
-
|
|
6
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
|
|
7
|
-
146:6 warning React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
8
|
-
|
|
9
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
|
|
10
|
-
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
|
|
11
|
-
259:6 warning React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
12
|
-
346:6 warning React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
13
|
-
468:5 warning React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
14
|
-
536:6 warning React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
15
|
-
542:6 warning React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
16
|
-
|
|
17
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
|
|
18
|
-
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
|
|
19
|
-
84:6 warning React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
20
|
-
|
|
21
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
|
|
22
|
-
179:6 warning React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array react-hooks/exhaustive-deps
|
|
23
|
-
|
|
24
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
|
|
25
|
-
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
|
|
26
|
-
|
|
27
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
|
|
28
|
-
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
|
|
29
|
-
|
|
30
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/Table/Table.context.tsx
|
|
31
|
-
23: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
|
|
32
|
-
|
|
33
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
|
|
34
|
-
53:6 warning React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
35
|
-
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
|
|
36
|
-
104:5 warning React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
|
|
37
|
-
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
|
|
38
|
-
|
|
39
|
-
/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
|
|
40
|
-
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
|
|
41
|
-
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
|
|
42
|
-
|
|
43
|
-
โ 20 problems (0 errors, 20 warnings)
|
|
44
|
-
|
|
45
|
-
Rule | Time (ms) | Relative
|
|
46
|
-
:----------------------------------------|----------:|--------:
|
|
47
|
-
@typescript-eslint/no-unused-vars | 2115.502 | 60.0%
|
|
48
|
-
react-hooks/rules-of-hooks | 141.299 | 4.0%
|
|
49
|
-
no-global-assign | 128.266 | 3.6%
|
|
50
|
-
react-hooks/exhaustive-deps | 107.897 | 3.1%
|
|
51
|
-
no-misleading-character-class | 72.815 | 2.1%
|
|
52
|
-
@typescript-eslint/ban-ts-comment | 70.843 | 2.0%
|
|
53
|
-
no-loss-of-precision | 55.192 | 1.6%
|
|
54
|
-
no-unexpected-multiline | 52.206 | 1.5%
|
|
55
|
-
no-regex-spaces | 50.033 | 1.4%
|
|
56
|
-
@typescript-eslint/no-unused-expressions | 49.226 | 1.4%
|