From 48add63981db58212411a8a338ec327abecf41f3 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 4 Nov 2024 17:51:12 +0100 Subject: [PATCH 01/29] Add granular support for `allowFontScaling` in all the typographic styles --- src/components/typography/IOText.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/typography/IOText.tsx b/src/components/typography/IOText.tsx index a8e01ce4..965d8668 100644 --- a/src/components/typography/IOText.tsx +++ b/src/components/typography/IOText.tsx @@ -47,10 +47,7 @@ type IOTextBaseProps = { style?: IOTextStyle; }; -type IOTextExcludedProps = Omit< - ComponentProps, - "allowFontScaling" | "maxFontSizeMultiplier" | "style" ->; +type IOTextExcludedProps = Omit, "style">; export type IOTextProps = IOTextBaseProps & IOTextExcludedProps; @@ -98,6 +95,8 @@ export const IOText = forwardRef( textStyle, style, children, + allowFontScaling, + maxFontSizeMultiplier, ...props }, ref @@ -144,8 +143,8 @@ export const IOText = forwardRef( /* Accessible typography based on the `fontScale` parameter */ const accessibleFontSizeProps: ComponentProps = { - allowFontScaling: isExperimental, - maxFontSizeMultiplier: 1.25 + allowFontScaling: allowFontScaling ?? isExperimental, + maxFontSizeMultiplier: maxFontSizeMultiplier ?? 1.25 }; return ( From 93cda1798e26049a69f6e57ae6867f42d564e6a3 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 5 Nov 2024 14:07:52 +0100 Subject: [PATCH 02/29] Make `Tag` and `Badge` dynamic --- src/components/badge/Badge.tsx | 14 +++++++++----- src/components/icons/Icon.tsx | 17 +++++++++++------ src/components/tag/Tag.tsx | 25 ++++++++++++++++--------- src/components/typography/IOText.tsx | 3 ++- src/utils/accessibility.ts | 16 +++++++++++++++- src/utils/fonts.ts | 1 + 6 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index 12f412e2..1601de87 100644 --- a/src/components/badge/Badge.tsx +++ b/src/components/badge/Badge.tsx @@ -8,6 +8,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { IOText } from "../typography"; @@ -42,15 +43,12 @@ const styles = StyleSheet.create({ flexDirection: "row", alignItems: "center", justifyContent: "center", + borderCurve: "continuous", ...Platform.select({ android: { textAlignVertical: "center" } - }), - borderCurve: "continuous", - borderRadius: IOBadgeRadius, - paddingHorizontal: IOBadgeHSpacing, - paddingVertical: IOBadgeVSpacing + }) } }); @@ -60,6 +58,7 @@ const styles = StyleSheet.create({ export const Badge = ({ text, outline = false, variant, testID }: Badge) => { const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + const fontScale = useIOFontDynamicScale(); const mapVariants: Record< NonNullable, @@ -153,6 +152,11 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => { testID={testID} style={[ styles.badge, + { + borderRadius: IOBadgeRadius * fontScale, + paddingHorizontal: IOBadgeHSpacing * fontScale, + paddingVertical: IOBadgeVSpacing * fontScale + }, outline ? { borderWidth: 1, diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx index e50800fd..48079250 100644 --- a/src/components/icons/Icon.tsx +++ b/src/components/icons/Icon.tsx @@ -1,6 +1,7 @@ import React from "react"; import { ColorValue } from "react-native"; import { IOColors } from "../../core/IOColors"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; /* Icons */ import IconAbacus from "./svg/IconAbacus"; @@ -51,6 +52,7 @@ import IconChevronRight from "./svg/IconChevronRight"; import IconChevronRightListItem from "./svg/IconChevronRightListItem"; import IconChevronTop from "./svg/IconChevronTop"; import IconCie from "./svg/IconCie"; +import IconCieLetter from "./svg/IconCieLetter"; import IconCloseLarge from "./svg/IconCloseLarge"; import IconCloseMedium from "./svg/IconCloseMedium"; import IconCloseSmall from "./svg/IconCloseSmall"; @@ -199,7 +201,6 @@ import LegIconCheckOff from "./svg/LegIconCheckOff"; import LegIconCheckOn from "./svg/LegIconCheckOn"; import LegIconRadioOff from "./svg/LegIconRadioOff"; import LegIconRadioOn from "./svg/LegIconRadioOn"; -import IconCieLetter from './svg/IconCieLetter'; export const IOIcons = { spid: IconSpid, @@ -404,10 +405,7 @@ export const IOIcons = { export type IOIcons = keyof typeof IOIcons; -/* The following values should be deleted: 12, 30 */ -/* 96 is too big for an icon, it should be replaced -with a Pictogram instead */ -export type IOIconSizeScale = 12 | 16 | 20 | 24 | 30 | 32 | 48 | 96; +export type IOIconSizeScale = 16 | 20 | 24 | 32 | 48; /* Sizes used exclusively for the Checkbox component */ export type IOIconSizeScaleCheckbox = 14 | 18; @@ -418,6 +416,7 @@ export type IOIconsProps = { testID?: string; accessible?: boolean; accessibilityLabel?: string; + allowFontScaling?: boolean; }; /* @@ -430,15 +429,21 @@ export const Icon = ({ size = 24, accessible = false, accessibilityLabel = "", + allowFontScaling = false, ...props }: IOIconsProps) => { + const fontScale = useIOFontDynamicScale(); + const IconElement = IOIcons[name]; const isAccessible = accessible && accessibilityLabel.trim().length > 0; + const iconSize = + allowFontScaling && typeof size === "number" ? size * fontScale : size; + return ( { const theme = useIOTheme(); + const fontScale = useIOFontDynamicScale(); const { isExperimental } = useIOExperimentalDesign(); const variantProps = getVariantProps(variant, customIconProps); return ( - + {pipe( variantProps, O.fromNullable, @@ -156,6 +163,7 @@ export const Tag = ({ ({ iconColor, iconName }) => ( } {text && ( ( /* Accessible typography based on the `fontScale` parameter */ const accessibleFontSizeProps: ComponentProps = { allowFontScaling: allowFontScaling ?? isExperimental, - maxFontSizeMultiplier: maxFontSizeMultiplier ?? 1.25 + maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOFontSizeMultiplier }; return ( diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts index 0b7b224d..32412918 100644 --- a/src/utils/accessibility.ts +++ b/src/utils/accessibility.ts @@ -2,7 +2,9 @@ import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import I18n from "i18n-js"; import { useEffect, useState } from "react"; -import { AccessibilityInfo, Platform } from "react-native"; +import { AccessibilityInfo, PixelRatio, Platform } from "react-native"; +import { useIOExperimentalDesign } from "../core"; +import { IOFontSizeMultiplier } from "./fonts"; /** * This function is used to get the text that will be read by the screen reader @@ -49,3 +51,15 @@ export const useBoldTextEnabled = () => { return boldTextEnabled; }; + +/** + * Returns a font size multiplier based on the font scale of the device, + * but limited to the `IOFontSizeMultiplier` value. + * @returns number + */ +export const useIOFontDynamicScale = (): number => { + const { isExperimental } = useIOExperimentalDesign(); + const deviceFontScale = isExperimental ? PixelRatio.getFontScale() : 1; + + return Math.min(deviceFontScale, IOFontSizeMultiplier); +}; diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts index 2ff4be4f..34ec42e7 100644 --- a/src/utils/fonts.ts +++ b/src/utils/fonts.ts @@ -112,6 +112,7 @@ export const makeFontFamilyName = ( const defaultFont: IOFontFamily = "TitilliumSansPro"; const defaultWeight: IOFontWeight = "Regular"; const defaultFontSize: IOFontSize = 16; +export const IOFontSizeMultiplier = 1.25; /** * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android). From 8ee6ee225d0f8aad0055d755f33f2a939fd71c2c Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 5 Nov 2024 14:10:17 +0100 Subject: [PATCH 03/29] Add dynamic size to checkbox components --- src/components/checkbox/AnimatedCheckbox.tsx | 46 ++++++++++++------- src/components/checkbox/CheckboxLabel.tsx | 21 ++++++--- src/components/common/AnimatedTick.tsx | 12 +++-- src/components/listitems/ListItemCheckbox.tsx | 27 ++++++----- 4 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/components/checkbox/AnimatedCheckbox.tsx b/src/components/checkbox/AnimatedCheckbox.tsx index 1165a84d..5c543911 100644 --- a/src/components/checkbox/AnimatedCheckbox.tsx +++ b/src/components/checkbox/AnimatedCheckbox.tsx @@ -1,5 +1,11 @@ import React, { useEffect } from "react"; -import { Pressable, PressableProps, StyleSheet, View } from "react-native"; +import { + Pressable, + PressableProps, + StyleSheet, + View, + ViewStyle +} from "react-native"; import Animated, { Easing, interpolate, @@ -8,6 +14,7 @@ import Animated, { withSpring, withTiming } from "react-native-reanimated"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { useIOExperimentalDesign } from "../../core"; import { IOSpringValues } from "../../core/IOAnimations"; import { IOColors } from "../../core/IOColors"; @@ -26,28 +33,18 @@ type OwnProps = Props & Pick; const checkBoxRadius: number = 5; const styles = StyleSheet.create({ - checkBoxWrapper: { - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size - }, checkboxBorder: { + borderWidth: IOSelectionTickVisualParams.borderWidth, + borderCurve: "continuous", position: "absolute", left: 0, - top: 0, - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size, - borderWidth: IOSelectionTickVisualParams.borderWidth, - borderRadius: checkBoxRadius, - borderCurve: "continuous" + top: 0 }, checkBoxSquare: { + borderCurve: "continuous", position: "absolute", left: 0, - top: 0, - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size, - borderRadius: checkBoxRadius, - borderCurve: "continuous" + top: 0 } }); @@ -56,6 +53,7 @@ const styles = StyleSheet.create({ * standard {@link CheckBox} or other composite components. */ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { + const fontScale = useIOFontDynamicScale(); const isChecked = checked ?? false; const { isExperimental } = useIOExperimentalDesign(); @@ -80,6 +78,17 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { const squareAnimationProgress = useSharedValue(checked ? 1 : 0); const tickAnimationProgress = useSharedValue(checked ? 1 : 0); + const checkboxSizeStyle: ViewStyle = { + width: IOSelectionTickVisualParams.size * fontScale, + height: IOSelectionTickVisualParams.size * fontScale, + borderRadius: checkBoxRadius * fontScale + }; + + const checkboxWrapperSizeStyle: ViewStyle = { + width: IOSelectionTickVisualParams.size * fontScale, + height: IOSelectionTickVisualParams.size * fontScale + }; + useEffect(() => { // eslint-disable-next-line functional/immutable-data squareAnimationProgress.value = withSpring( @@ -108,12 +117,13 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { accessible={false} disabled={disabled} onPress={onPress} - style={styles.checkBoxWrapper} + style={checkboxWrapperSizeStyle} testID="AnimatedCheckboxInput" > { { {isChecked && ( diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx index d0630ca0..8f053d92 100644 --- a/src/components/checkbox/CheckboxLabel.tsx +++ b/src/components/checkbox/CheckboxLabel.tsx @@ -1,10 +1,10 @@ import * as React from "react"; -import { useState } from "react"; +import { ComponentProps, useState } from "react"; import { Pressable, View } from "react-native"; import { useIOTheme } from "../../core"; import { IOStyles } from "../../core/IOStyles"; import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; -import { HSpacer } from "../spacer/Spacer"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { H6 } from "../typography/H6"; import { AnimatedCheckbox } from "./AnimatedCheckbox"; @@ -19,8 +19,8 @@ const DISABLED_OPACITY = 0.5; // disabled: the component is no longer touchable // onPress: type OwnProps = Props & - Pick, "disabled" | "checked"> & - Pick, "onPress">; + Pick, "disabled" | "checked"> & + Pick, "onPress">; /** * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox} @@ -36,6 +36,7 @@ export const CheckboxLabel = ({ onValueChange }: OwnProps) => { const theme = useIOTheme(); + const fontScale = useIOFontDynamicScale(); const [toggleValue, setToggleValue] = useState(checked ?? false); @@ -65,7 +66,16 @@ export const CheckboxLabel = ({ // inheritance on Android needsOffscreenAlphaCompositing={true} > - + -
{label}
diff --git a/src/components/common/AnimatedTick.tsx b/src/components/common/AnimatedTick.tsx index 4e8094dd..f3f4a06d 100644 --- a/src/components/common/AnimatedTick.tsx +++ b/src/components/common/AnimatedTick.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import Animated, { + SharedValue, useAnimatedProps, useAnimatedRef } from "react-native-reanimated"; @@ -8,7 +9,8 @@ import Svg, { Path, PathProps } from "react-native-svg"; const AnimatedPath = Animated.createAnimatedComponent(Path); interface AnimatedTickProps extends PathProps { - progress: Animated.SharedValue; + size?: number; + progress: SharedValue; onLayout?: () => void; } @@ -20,7 +22,11 @@ const TickSVGPath = "m7 12 4 4 7-7"; * It comes without any state logic. * */ -export const AnimatedTick = ({ progress, ...pathProps }: AnimatedTickProps) => { +export const AnimatedTick = ({ + size, + progress, + ...pathProps +}: AnimatedTickProps) => { const [length, setLength] = useState(0); const ref = useAnimatedRef(); @@ -38,7 +44,7 @@ export const AnimatedTick = ({ progress, ...pathProps }: AnimatedTickProps) => { }; return ( - + - + {icon && ( - - - + )}
{value} From 47c681cfc1ac49b4be3d52675700eee68fc3949e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 5 Nov 2024 17:51:26 +0100 Subject: [PATCH 04/29] Make part of the selection components completely dynamic --- src/components/badge/Badge.tsx | 8 +- src/components/checkbox/AnimatedCheckbox.tsx | 22 +++-- src/components/checkbox/CheckboxLabel.tsx | 11 ++- src/components/icons/Icon.tsx | 6 +- src/components/listitems/ListItemCheckbox.tsx | 14 +++- src/components/listitems/ListItemRadio.tsx | 82 +++++++++++-------- .../listitems/ListItemRadioWithAmount.tsx | 9 +- src/components/listitems/ListItemSwitch.tsx | 5 +- src/components/radio/AnimatedRadio.tsx | 46 +++++++---- src/components/radio/RadioButtonLabel.tsx | 24 ++++-- src/components/tag/Tag.tsx | 11 +-- src/utils/accessibility.ts | 18 +++- 12 files changed, 166 insertions(+), 90 deletions(-) diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index 1601de87..33469d68 100644 --- a/src/components/badge/Badge.tsx +++ b/src/components/badge/Badge.tsx @@ -58,7 +58,7 @@ const styles = StyleSheet.create({ export const Badge = ({ text, outline = false, variant, testID }: Badge) => { const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); - const fontScale = useIOFontDynamicScale(); + const { dynamicFontScale } = useIOFontDynamicScale(); const mapVariants: Record< NonNullable, @@ -153,9 +153,9 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => { style={[ styles.badge, { - borderRadius: IOBadgeRadius * fontScale, - paddingHorizontal: IOBadgeHSpacing * fontScale, - paddingVertical: IOBadgeVSpacing * fontScale + borderRadius: IOBadgeRadius * dynamicFontScale, + paddingHorizontal: IOBadgeHSpacing * dynamicFontScale, + paddingVertical: IOBadgeVSpacing * dynamicFontScale }, outline ? { diff --git a/src/components/checkbox/AnimatedCheckbox.tsx b/src/components/checkbox/AnimatedCheckbox.tsx index 5c543911..e812a78c 100644 --- a/src/components/checkbox/AnimatedCheckbox.tsx +++ b/src/components/checkbox/AnimatedCheckbox.tsx @@ -25,6 +25,7 @@ import { import { AnimatedTick } from "../common/AnimatedTick"; type Props = { + size: number; checked?: boolean; }; @@ -52,8 +53,13 @@ const styles = StyleSheet.create({ * An animated checkbox. This can be used to implement a * standard {@link CheckBox} or other composite components. */ -export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { - const fontScale = useIOFontDynamicScale(); +export const AnimatedCheckbox = ({ + size, + checked, + onPress, + disabled +}: OwnProps) => { + const { dynamicFontScale } = useIOFontDynamicScale(); const isChecked = checked ?? false; const { isExperimental } = useIOExperimentalDesign(); @@ -79,14 +85,14 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { const tickAnimationProgress = useSharedValue(checked ? 1 : 0); const checkboxSizeStyle: ViewStyle = { - width: IOSelectionTickVisualParams.size * fontScale, - height: IOSelectionTickVisualParams.size * fontScale, - borderRadius: checkBoxRadius * fontScale + width: size, + height: size, + borderRadius: checkBoxRadius * dynamicFontScale }; const checkboxWrapperSizeStyle: ViewStyle = { - width: IOSelectionTickVisualParams.size * fontScale, - height: IOSelectionTickVisualParams.size * fontScale + width: size, + height: size }; useEffect(() => { @@ -142,7 +148,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => { {isChecked && ( diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx index 8f053d92..6a79a06f 100644 --- a/src/components/checkbox/CheckboxLabel.tsx +++ b/src/components/checkbox/CheckboxLabel.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { ComponentProps, useState } from "react"; import { Pressable, View } from "react-native"; -import { useIOTheme } from "../../core"; +import { IOSelectionTickVisualParams, useIOTheme } from "../../core"; import { IOStyles } from "../../core/IOStyles"; import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; import { useIOFontDynamicScale } from "../../utils/accessibility"; @@ -36,7 +36,7 @@ export const CheckboxLabel = ({ onValueChange }: OwnProps) => { const theme = useIOTheme(); - const fontScale = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); const [toggleValue, setToggleValue] = useState(checked ?? false); @@ -72,7 +72,7 @@ export const CheckboxLabel = ({ { alignItems: "center", width: "100%", - columnGap: 8 * fontScale + columnGap: 8 * dynamicFontScale * spacingScaleMultiplier } ]} > @@ -84,7 +84,10 @@ export const CheckboxLabel = ({ alignSelf: "flex-start" }} > - +
{label} diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx index 48079250..7950eeb0 100644 --- a/src/components/icons/Icon.tsx +++ b/src/components/icons/Icon.tsx @@ -432,12 +432,14 @@ export const Icon = ({ allowFontScaling = false, ...props }: IOIconsProps) => { - const fontScale = useIOFontDynamicScale(); + const { dynamicFontScale } = useIOFontDynamicScale(); const IconElement = IOIcons[name]; const isAccessible = accessible && accessibilityLabel.trim().length > 0; const iconSize = - allowFontScaling && typeof size === "number" ? size * fontScale : size; + allowFontScaling && typeof size === "number" + ? size * dynamicFontScale + : size; return ( { + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const [toggleValue, setToggleValue] = useState(selected ?? false); // Animations const isPressed: Animated.SharedValue = useSharedValue(0); @@ -161,7 +165,10 @@ export const ListItemCheckbox = ({ IOStyles.row, { flexShrink: 1, - columnGap: IOSelectionListItemVisualParams.iconMargin + columnGap: + IOSelectionListItemVisualParams.iconMargin * + dynamicFontScale * + spacingScaleMultiplier } ]} > @@ -183,7 +190,10 @@ export const ListItemCheckbox = ({ accessibilityElementsHidden importantForAccessibility="no-hide-descendants" > - + {description && ( diff --git a/src/components/listitems/ListItemRadio.tsx b/src/components/listitems/ListItemRadio.tsx index 6b7bbd7f..46d42356 100644 --- a/src/components/listitems/ListItemRadio.tsx +++ b/src/components/listitems/ListItemRadio.tsx @@ -3,7 +3,8 @@ import { useCallback, useState } from "react"; import { Image, Pressable, StyleSheet, View } from "react-native"; import ReactNativeHapticFeedback from "react-native-haptic-feedback"; import Animated, { - Extrapolate, + Extrapolation, + SharedValue, interpolate, interpolateColor, useAnimatedStyle, @@ -17,11 +18,13 @@ import { IOScaleValues, IOSelectionListItemStyles, IOSelectionListItemVisualParams, + IOSelectionTickVisualParams, IOSpringValues, IOStyles, hexToRgba, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; import { IOLogoPaymentType, LogoPayment } from "../logos"; @@ -91,8 +94,9 @@ export const ListItemRadio = ({ testID }: ListItemRadioProps) => { const [toggleValue, setToggleValue] = useState(selected ?? false); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); // Animations - const isPressed: Animated.SharedValue = useSharedValue(0); + const isPressed: SharedValue = useSharedValue(0); // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.basicButton?.pressedState; @@ -114,7 +118,7 @@ export const ListItemRadio = ({ progressPressed.value, [0, 1], [1, animationScaleValue], - Extrapolate.CLAMP + Extrapolation.CLAMP ); return { @@ -200,7 +204,10 @@ export const ListItemRadio = ({ - + @@ -238,37 +245,41 @@ export const ListItemRadio = ({ > - - {startImage && ( - - {/* icon or paymentLogo props are mutually exclusive */} - {startImage.icon && ( - - )} - {startImage.uri && ( - - )} - {startImage.paymentLogo && ( - - )} + + {startImage?.icon && ( + + )} + {startImage?.uri && ( + + + + )} + {startImage?.paymentLogo && ( + + )} -
{value}
@@ -279,7 +290,10 @@ export const ListItemRadio = ({ accessibilityElementsHidden importantForAccessibility="no-hide-descendants" > - + {description && ( diff --git a/src/components/listitems/ListItemRadioWithAmount.tsx b/src/components/listitems/ListItemRadioWithAmount.tsx index d9bb05b9..23c91614 100644 --- a/src/components/listitems/ListItemRadioWithAmount.tsx +++ b/src/components/listitems/ListItemRadioWithAmount.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import RNReactNativeHapticFeedback from "react-native-haptic-feedback"; -import { IOColors, useIOTheme } from "../../core"; +import { IOColors, IOSelectionTickVisualParams, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { Icon } from "../icons"; import { AnimatedRadio } from "../radio/AnimatedRadio"; import { HSpacer, VSpacer } from "../spacer"; @@ -34,6 +35,7 @@ export const ListItemRadioWithAmount = ({ suggestReason, formattedAmountString }: ListItemRadioWithAmountProps) => { + const { dynamicFontScale } = useIOFontDynamicScale(); const [toggleValue, setToggleValue] = React.useState(selected ?? false); const pressHandler = () => { RNReactNativeHapticFeedback.trigger("impactLight"); @@ -83,7 +85,10 @@ export const ListItemRadioWithAmount = ({ {formattedAmountString}
- + ); diff --git a/src/components/listitems/ListItemSwitch.tsx b/src/components/listitems/ListItemSwitch.tsx index 46ad6f0b..4b9e71a0 100644 --- a/src/components/listitems/ListItemSwitch.tsx +++ b/src/components/listitems/ListItemSwitch.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { ComponentProps, useMemo } from "react"; import { GestureResponderEvent, Platform, Switch, View } from "react-native"; import { WithTestID } from "../../utils/types"; import { @@ -42,7 +42,7 @@ const ESTIMATED_SWITCH_HEIGHT: number = 32; export type ListItemSwitchProps = PartialProps & ListItemSwitchGraphicProps & - Pick, "value" | "disabled">; + Pick, "value" | "disabled">; export const ListItemSwitch = React.memo( ({ @@ -112,6 +112,7 @@ export const ListItemSwitch = React.memo( }} > ; const styles = StyleSheet.create({ - radioWrapper: { - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size - }, radioBorder: { position: "absolute", left: 0, top: 0, - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size, - borderWidth: IOSelectionTickVisualParams.borderWidth, - borderRadius: IOSelectionTickVisualParams.size / 2 + borderWidth: IOSelectionTickVisualParams.borderWidth }, radioCircle: { position: "absolute", left: 0, - top: 0, - width: IOSelectionTickVisualParams.size, - height: IOSelectionTickVisualParams.size, - borderRadius: IOSelectionTickVisualParams.size / 2 + top: 0 } }); @@ -51,7 +48,12 @@ const styles = StyleSheet.create({ * An animated checkbox. This can be used to implement a * standard {@link CheckBox} or other composite components. */ -export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { +export const AnimatedRadio = ({ + size, + checked, + onPress, + disabled +}: OwnProps) => { const isChecked = checked ?? false; const { isExperimental } = useIOExperimentalDesign(); @@ -76,6 +78,17 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { const circleAnimationProgress = useSharedValue(checked ? 1 : 0); const tickAnimationProgress = useSharedValue(checked ? 1 : 0); + const radioButtonSizeStyle: ViewStyle = { + width: size, + height: size, + borderRadius: size / 2 + }; + + const radioButtonWrapperSizeStyle: ViewStyle = { + width: size, + height: size + }; + useEffect(() => { // eslint-disable-next-line functional/immutable-data circleAnimationProgress.value = withSpring( @@ -105,11 +118,12 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => { disabled={disabled} testID="AnimatedRadioInput" onPress={onPress} - style={styles.radioWrapper} + style={radioButtonWrapperSizeStyle} > { { {isChecked && ( diff --git a/src/components/radio/RadioButtonLabel.tsx b/src/components/radio/RadioButtonLabel.tsx index 861768be..28bc422d 100644 --- a/src/components/radio/RadioButtonLabel.tsx +++ b/src/components/radio/RadioButtonLabel.tsx @@ -1,10 +1,10 @@ import * as React from "react"; -import { useState } from "react"; +import { ComponentProps, useState } from "react"; import { Pressable, View } from "react-native"; -import { useIOTheme } from "../../core"; +import { IOSelectionTickVisualParams, useIOTheme } from "../../core"; import { IOStyles } from "../../core/IOStyles"; import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; -import { HSpacer } from "../spacer/Spacer"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { H6 } from "../typography/H6"; import { AnimatedRadio } from "./AnimatedRadio"; @@ -17,9 +17,9 @@ type Props = { const DISABLED_OPACITY = 0.5; type RadioButtonLabelProps = Props & - Pick, "disabled" | "checked"> & + Pick, "disabled" | "checked"> & Pick< - React.ComponentProps, + ComponentProps, "onPress" | "accessibilityLabel" | "accessibilityHint" >; @@ -38,6 +38,7 @@ export const RadioButtonLabel = ({ accessibilityLabel, accessibilityHint }: RadioButtonLabelProps) => { + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); const theme = useIOTheme(); const [toggleValue, setToggleValue] = useState(checked ?? false); @@ -70,7 +71,12 @@ export const RadioButtonLabel = ({ - + -
{label}
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index 35b0d336..c0eb3bea 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -137,7 +137,7 @@ export const Tag = ({ iconAccessibilityLabel }: Tag) => { const theme = useIOTheme(); - const fontScale = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); const { isExperimental } = useIOExperimentalDesign(); const variantProps = getVariantProps(variant, customIconProps); @@ -148,10 +148,11 @@ export const Tag = ({ style={[ styles.tag, { - paddingHorizontal: IOTagHSpacing * fontScale, - paddingVertical: IOTagVSpacing * fontScale, - columnGap: IOTagIconMargin * fontScale, - borderRadius: IOTagRadius * fontScale + paddingHorizontal: IOTagHSpacing * dynamicFontScale, + paddingVertical: IOTagVSpacing * dynamicFontScale, + columnGap: + IOTagIconMargin * dynamicFontScale * spacingScaleMultiplier, + borderRadius: IOTagRadius * dynamicFontScale } ]} > diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts index 32412918..16ade06c 100644 --- a/src/utils/accessibility.ts +++ b/src/utils/accessibility.ts @@ -2,7 +2,7 @@ import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import I18n from "i18n-js"; import { useEffect, useState } from "react"; -import { AccessibilityInfo, PixelRatio, Platform } from "react-native"; +import { AccessibilityInfo, Platform, useWindowDimensions } from "react-native"; import { useIOExperimentalDesign } from "../core"; import { IOFontSizeMultiplier } from "./fonts"; @@ -57,9 +57,19 @@ export const useBoldTextEnabled = () => { * but limited to the `IOFontSizeMultiplier` value. * @returns number */ -export const useIOFontDynamicScale = (): number => { +export const useIOFontDynamicScale = (): { + dynamicFontScale: number; + spacingScaleMultiplier: number; +} => { const { isExperimental } = useIOExperimentalDesign(); - const deviceFontScale = isExperimental ? PixelRatio.getFontScale() : 1; + const { fontScale } = useWindowDimensions(); - return Math.min(deviceFontScale, IOFontSizeMultiplier); + const deviceFontScale = isExperimental ? fontScale : 1; + + return { + dynamicFontScale: Math.min(deviceFontScale, IOFontSizeMultiplier), + /* We make the spacing dynamic based on the font scale, but we multiply + this value to limit the amount of scaling applied to the spacing */ + spacingScaleMultiplier: 0.75 + }; }; From 83f4ad9e84ef785887c1e50e8280e020c812b56e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 6 Nov 2024 11:15:29 +0100 Subject: [PATCH 05/29] Add dynamic space margin to `ListItemSwitch` --- src/components/listitems/ListItemSwitch.tsx | 45 +++++++++------------ 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/src/components/listitems/ListItemSwitch.tsx b/src/components/listitems/ListItemSwitch.tsx index 4b9e71a0..a33e61e9 100644 --- a/src/components/listitems/ListItemSwitch.tsx +++ b/src/components/listitems/ListItemSwitch.tsx @@ -1,11 +1,12 @@ import React, { ComponentProps, useMemo } from "react"; import { GestureResponderEvent, Platform, Switch, View } from "react-native"; -import { WithTestID } from "../../utils/types"; import { IOSelectionListItemStyles, IOSelectionListItemVisualParams, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; +import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; @@ -60,6 +61,8 @@ export const ListItemSwitch = React.memo( testID }: ListItemSwitchProps) => { const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = + useIOFontDynamicScale(); // If we have a badge or we are loading, we can't render the switch // this affects the accessibility tree and the rendering of the component @@ -92,7 +95,11 @@ export const ListItemSwitch = React.memo( style={{ flex: 1, flexDirection: "row", - alignItems: "center" + alignItems: icon ? "flex-start" : "center", + columnGap: + IOSelectionListItemVisualParams.iconMargin * + dynamicFontScale * + spacingScaleMultiplier }} accessible={!canRenderSwitch} {...Platform.select({ @@ -105,32 +112,18 @@ export const ListItemSwitch = React.memo( accessibilityState={{ disabled }} > {icon && ( - - - + )} {paymentLogo && ( - - - + )}
Date: Wed, 6 Nov 2024 12:18:40 +0100 Subject: [PATCH 06/29] Add dynamic margin to `ListItemNav` and `ListItemNavAlert` --- src/components/listitems/ListItemNav.tsx | 52 ++++++++++--------- src/components/listitems/ListItemNavAlert.tsx | 48 ++++++++++------- src/utils/accessibility.ts | 2 +- 3 files changed, 58 insertions(+), 44 deletions(-) diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx index 879ffde7..d2fa121c 100644 --- a/src/components/listitems/ListItemNav.tsx +++ b/src/components/listitems/ListItemNav.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps, ReactNode, useCallback } from "react"; +import React, { ComponentProps, useCallback } from "react"; import { GestureResponderEvent, Image, @@ -27,6 +27,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { Avatar } from "../avatar"; import { Badge } from "../badge"; @@ -118,11 +119,7 @@ export const ListItemNav = ({ const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); - const withMargin = (GraphicalAsset: ReactNode) => ( - - {GraphicalAsset} - - ); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); const listItemNavContent = ( <> @@ -247,30 +244,37 @@ export const ListItemNav = ({ style={[IOListItemStyles.listItem, animatedBackgroundStyle]} > {/* Possibile graphical assets - Icon - Image URL (for payment logos) - Avatar */} - {icon && - withMargin( - - )} - {paymentLogoUri && - withMargin( - - )} - {avatar && withMargin()} + {icon && ( + + )} + {paymentLogoUri && ( + + )} + {avatar && } {listItemNavContent} {loading && } diff --git a/src/components/listitems/ListItemNavAlert.tsx b/src/components/listitems/ListItemNavAlert.tsx index 2722d638..d5cc87af 100644 --- a/src/components/listitems/ListItemNavAlert.tsx +++ b/src/components/listitems/ListItemNavAlert.tsx @@ -1,25 +1,27 @@ import React, { ComponentProps, useCallback, useMemo } from "react"; import { GestureResponderEvent, Pressable, View } from "react-native"; import Animated, { - Extrapolate, + Extrapolation, interpolate, interpolateColor, + SharedValue, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated"; import { + hexToRgba, IOColors, IOListItemStyles, IOListItemVisualParams, IOScaleValues, IOSpringValues, IOStyles, - hexToRgba, useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { Icon } from "../icons"; import { H6, LabelSmall } from "../typography"; @@ -44,7 +46,9 @@ export const ListItemNavAlert = ({ accessibilityHint, testID }: ListItemNavAlert) => { - const isPressed: Animated.SharedValue = useSharedValue(0); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + + const isPressed: SharedValue = useSharedValue(0); const { isExperimental } = useIOExperimentalDesign(); const componentValueToAccessibility = useMemo( @@ -113,7 +117,7 @@ export const ListItemNavAlert = ({ progressPressed.value, [0, 1], [1, animationScaleValue], - Extrapolate.CLAMP + Extrapolation.CLAMP ); return { @@ -159,25 +163,31 @@ export const ListItemNavAlert = ({ accessibilityElementsHidden > {!withoutIcon && ( - - - - )} - {listItemNavAlertContent} - - + )} + {listItemNavAlertContent} + + diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts index 16ade06c..237e8b93 100644 --- a/src/utils/accessibility.ts +++ b/src/utils/accessibility.ts @@ -70,6 +70,6 @@ export const useIOFontDynamicScale = (): { dynamicFontScale: Math.min(deviceFontScale, IOFontSizeMultiplier), /* We make the spacing dynamic based on the font scale, but we multiply this value to limit the amount of scaling applied to the spacing */ - spacingScaleMultiplier: 0.75 + spacingScaleMultiplier: 0.85 }; }; From 46fcce9e482615daa7cb5ded18d13dce3a8cbe41 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 6 Nov 2024 16:59:23 +0100 Subject: [PATCH 07/29] =?UTF-8?q?Add=20dynamic=20spacing=20to=20`ListItem?= =?UTF-8?q?=E2=80=A6`=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/LogoPaymentWithFallback.tsx | 21 ++++++-- src/components/icons/Icon.tsx | 11 +++- src/components/listitems/ListItemAction.tsx | 33 ++++++++---- src/components/listitems/ListItemAmount.tsx | 24 +++++---- src/components/listitems/ListItemHeader.tsx | 11 +++- src/components/listitems/ListItemInfo.tsx | 50 +++++++++++-------- src/components/listitems/ListItemInfoCopy.tsx | 44 +++++++++------- src/components/listitems/ListItemNav.tsx | 30 ++++++----- src/components/listitems/ListItemNavAlert.tsx | 1 + .../listitems/ListItemTransaction.tsx | 29 +++++++---- src/utils/accessibility.ts | 12 +++-- .../checkbox/AnimatedCheckbox.stories.ts | 1 + 12 files changed, 172 insertions(+), 95 deletions(-) diff --git a/src/components/common/LogoPaymentWithFallback.tsx b/src/components/common/LogoPaymentWithFallback.tsx index 2dbfb6fd..bca6a6f8 100644 --- a/src/components/common/LogoPaymentWithFallback.tsx +++ b/src/components/common/LogoPaymentWithFallback.tsx @@ -12,6 +12,7 @@ import { LogoPayment, LogoPaymentExt } from "../logos"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; export type LogoPaymentWithFallback = { brand?: string; @@ -40,6 +41,7 @@ export const LogoPaymentWithFallback = ({ isExtended = false, size = isExtended ? 48 : 24 }: LogoPaymentWithFallback) => { + const { dynamicFontScale } = useIOFontDynamicScale(); const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos; return pipe( @@ -48,12 +50,25 @@ export const LogoPaymentWithFallback = ({ O.chain(findFirstCaseInsensitive(logos)), O.map(([brand]) => brand), O.fold( - () => , + () => ( + + ), brand => isExtended ? ( - + ) : ( - + ) ) ); diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx index 7950eeb0..9a14988f 100644 --- a/src/components/icons/Icon.tsx +++ b/src/components/icons/Icon.tsx @@ -464,6 +464,7 @@ type IOAnimatedIconsProps = { color?: ColorValue; size?: IOIconSizeScale | "100%"; accessible?: boolean; + allowFontScaling?: boolean; }; export const AnimatedIcon = ({ @@ -471,14 +472,22 @@ export const AnimatedIcon = ({ color = IOColors.bluegrey, size = 24, accessible = false, + allowFontScaling = false, ...props }: IOAnimatedIconsProps) => { + const { dynamicFontScale } = useIOFontDynamicScale(); + const IconElement = IOIcons[name]; + const iconSize = + allowFontScaling && typeof size === "number" + ? size * dynamicFontScale + : size; + return ( (accessibilityLabel ? accessibilityLabel : `${label}`), [label, accessibilityLabel] @@ -77,7 +80,7 @@ export const ListItemAction = ({ progressPressed.value, [0, 1], [1, animationScaleValue], - Extrapolate.CLAMP + Extrapolation.CLAMP ); return { @@ -124,18 +127,26 @@ export const ListItemAction = ({ accessibilityElementsHidden > {icon && ( - - - + )} - + {label} diff --git a/src/components/listitems/ListItemAmount.tsx b/src/components/listitems/ListItemAmount.tsx index 24f7c638..da8f136e 100644 --- a/src/components/listitems/ListItemAmount.tsx +++ b/src/components/listitems/ListItemAmount.tsx @@ -7,9 +7,9 @@ import { IOStyles, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; -import { HSpacer } from "../spacer"; import { H3, H6 } from "../typography"; type ValueProps = ComponentProps; @@ -42,6 +42,7 @@ export const ListItemAmount = ({ testID }: ListItemAmount) => { const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); const listItemAccessibilityLabel = useMemo( () => (accessibilityLabel ? accessibilityLabel : `${label}`), @@ -65,18 +66,21 @@ export const ListItemAmount = ({ accessible accessibilityLabel={listItemAccessibilityLabel} > - + {iconName && ( - - - + )} {itemInfoTextComponent} -

{ const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const listItemAccessibilityLabel = useMemo( () => (accessibilityLabel ? accessibilityLabel : `${label}`), [label, accessibilityLabel] @@ -130,8 +133,14 @@ export const ListItemHeader = ({ importantForAccessibility={endElement ? "auto" : "no-hide-descendants"} > {iconName && ( - + { const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const componentValueToAccessibility = useMemo( () => (typeof value === "string" ? value : ""), [value] @@ -137,30 +140,33 @@ export const ListItemInfo = ({ accessible={endElement === undefined ? true : false} accessibilityLabel={listItemAccessibilityLabel} > - + {icon && ( - - - + )} {paymentLogoIcon && ( - - - + )} {itemInfoTextComponent} - {endElement && ( - - {listItemInfoAction()} - - )} + {endElement && {listItemInfoAction()}} ); diff --git a/src/components/listitems/ListItemInfoCopy.tsx b/src/components/listitems/ListItemInfoCopy.tsx index 5191c497..fed49506 100644 --- a/src/components/listitems/ListItemInfoCopy.tsx +++ b/src/components/listitems/ListItemInfoCopy.tsx @@ -1,7 +1,7 @@ import React, { ComponentProps, useCallback, useMemo } from "react"; import { GestureResponderEvent, Pressable, View } from "react-native"; import Animated, { - Extrapolate, + Extrapolation, interpolate, interpolateColor, useAnimatedStyle, @@ -20,6 +20,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; import { H6, LabelSmall } from "../typography"; @@ -50,6 +51,8 @@ export const ListItemInfoCopy = ({ const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const componentValueToAccessibility = useMemo( () => (typeof value === "string" ? value : ""), [value] @@ -101,7 +104,7 @@ export const ListItemInfoCopy = ({ progressPressed.value, [0, 1], [1, animationScaleValue], - Extrapolate.CLAMP + Extrapolation.CLAMP ); return { @@ -147,25 +150,32 @@ export const ListItemInfoCopy = ({ style={[IOListItemStyles.listItem, animatedBackgroundStyle]} > {icon && ( - - - - )} - {listItemInfoCopyContent} - - + )} + {listItemInfoCopyContent} + diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx index d2fa121c..ff7717a2 100644 --- a/src/components/listitems/ListItemNav.tsx +++ b/src/components/listitems/ListItemNav.tsx @@ -1,11 +1,5 @@ import React, { ComponentProps, useCallback } from "react"; -import { - GestureResponderEvent, - Image, - Pressable, - StyleSheet, - View -} from "react-native"; +import { GestureResponderEvent, Image, Pressable, View } from "react-native"; import Animated, { Extrapolate, interpolate, @@ -92,13 +86,6 @@ export type ListItemNavGraphicProps = export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps; -const styles = StyleSheet.create({ - paymentLogoSize: { - width: IOSelectionListItemVisualParams.iconSize, - height: IOSelectionListItemVisualParams.iconSize - } -}); - export const ListItemNav = ({ value, description, @@ -136,7 +123,12 @@ export const ListItemNav = ({ {topElement.dateValue && ( <> - + {topElement.dateValue} @@ -262,6 +254,7 @@ export const ListItemNav = ({ */} {icon && ( )} {avatar && } diff --git a/src/components/listitems/ListItemNavAlert.tsx b/src/components/listitems/ListItemNavAlert.tsx index d5cc87af..09ef626d 100644 --- a/src/components/listitems/ListItemNavAlert.tsx +++ b/src/components/listitems/ListItemNavAlert.tsx @@ -176,6 +176,7 @@ export const ListItemNavAlert = ({ > {!withoutIcon && ( + {paymentLogoIcon && ( - + {hasChevronRight && ( )} - + ); }; @@ -227,9 +239,7 @@ export const ListItemTransaction = ({ accessible={accessible} accessibilityLabel={accessibilityLabel} > - - - + ), onPress => ( @@ -268,9 +278,8 @@ const SkeletonComponent = () => ( ); -const Styles = StyleSheet.create({ +const styles = StyleSheet.create({ rightSection: { - marginLeft: IOListItemVisualParams.iconMargin, flexDirection: "row", alignItems: "center", height: "100%" diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts index 237e8b93..442ceabd 100644 --- a/src/utils/accessibility.ts +++ b/src/utils/accessibility.ts @@ -66,10 +66,14 @@ export const useIOFontDynamicScale = (): { const deviceFontScale = isExperimental ? fontScale : 1; - return { - dynamicFontScale: Math.min(deviceFontScale, IOFontSizeMultiplier), - /* We make the spacing dynamic based on the font scale, but we multiply + const dynamicFontScale = Math.min(deviceFontScale, IOFontSizeMultiplier); + /* We make the spacing dynamic based on the font scale, but we multiply this value to limit the amount of scaling applied to the spacing */ - spacingScaleMultiplier: 0.85 + const spacingScaleMultiplier = + dynamicFontScale <= IOFontSizeMultiplier ? 1 : 0.8; + + return { + dynamicFontScale, + spacingScaleMultiplier }; }; diff --git a/stories/components/checkbox/AnimatedCheckbox.stories.ts b/stories/components/checkbox/AnimatedCheckbox.stories.ts index 4729ca6b..2d627168 100644 --- a/stories/components/checkbox/AnimatedCheckbox.stories.ts +++ b/stories/components/checkbox/AnimatedCheckbox.stories.ts @@ -20,6 +20,7 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Primary: Story = { args: { + size: 24, checked: false } }; From 800ad828df7510b16796938c172d5cedf2db3e80 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 6 Nov 2024 18:21:52 +0100 Subject: [PATCH 08/29] Update `jest` snapshots --- jestSetup.js | 8 +- .../__snapshots__/badge.test.tsx.snap | 8 +- .../__snapshots__/listitem.test.tsx.snap | 784 +++++++++--------- 3 files changed, 408 insertions(+), 392 deletions(-) diff --git a/jestSetup.js b/jestSetup.js index d28af3e0..c07d0e28 100644 --- a/jestSetup.js +++ b/jestSetup.js @@ -28,7 +28,7 @@ jest.mock("react-native-reanimated", () => { // The mock misses the `addWhitelistedUIProps` implementation // So we override it with a no-op // eslint-disable-next-line functional/immutable-data,@typescript-eslint/no-empty-function - Reanimated.default.addWhitelistedUIProps = () => {}; + Reanimated.default.addWhitelistedUIProps = () => { }; return Reanimated; }); @@ -47,5 +47,9 @@ global.__reanimatedWorkletInit = jest.fn(); jest.mock("./src/utils/accessibility", () => ({ useBoldTextEnabled: () => false, - getAccessibleAmountText: t => t + getAccessibleAmountText: t => t, + useIOFontDynamicScale: () => ({ + dynamicFontScale: 1, + spacingScaleMultiplier: 1 + }) })); diff --git a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap index 1eab52ca..fdecf198 100644 --- a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap @@ -8,9 +8,11 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = ` { "alignItems": "center", "borderCurve": "continuous", - "borderRadius": 24, "flexDirection": "row", "justifyContent": "center", + }, + { + "borderRadius": 24, "paddingHorizontal": 8, "paddingVertical": 4, }, @@ -58,9 +60,11 @@ exports[`Test Badge Components Badge Snapshot 1`] = ` { "alignItems": "center", "borderCurve": "continuous", - "borderRadius": 24, "flexDirection": "row", "justifyContent": "center", + }, + { + "borderRadius": 24, "paddingHorizontal": 8, "paddingVertical": 4, }, diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index 71c4dc37..b0201d8d 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -59,6 +59,9 @@ exports[`Test List Item Components - Experimental Enabled ListItemAction Snapsh "flexDirection": "row", "justifyContent": "space-between", }, + { + "columnGap": 12, + }, { "transform": [ { @@ -73,6 +76,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemAction Snapsh style={ { "flexGrow": 1, + "flexShrink": 1, } } > @@ -219,11 +223,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemInfo Snapshot > - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -529,6 +533,9 @@ exports[`Test List Item Components - Experimental Enabled ListItemNav Snapshot "flexDirection": "row", "justifyContent": "space-between", }, + { + "columnGap": 12, + }, { "transform": [ { @@ -690,6 +697,9 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap "flexDirection": "row", "justifyContent": "space-between", }, + { + "columnGap": 12, + }, { "transform": [ { @@ -700,74 +710,66 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap ] } > - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -1150,12 +1144,14 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou style={ [ { - "borderRadius": 12, "borderWidth": 2, - "height": 24, "left": 0, "position": "absolute", "top": 0, + }, + { + "borderRadius": 12, + "height": 24, "width": 24, }, { @@ -1168,11 +1164,13 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou style={ [ { - "borderRadius": 12, - "height": 24, "left": 0, "position": "absolute", "top": 0, + }, + { + "borderRadius": 12, + "height": 24, "width": 24, }, { @@ -1192,9 +1190,10 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou @@ -1916,11 +1924,16 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = ` > - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -2226,6 +2234,9 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` "flexDirection": "row", "justifyContent": "space-between", }, + { + "columnGap": 12, + }, { "transform": [ { @@ -2387,6 +2398,9 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` "flexDirection": "row", "justifyContent": "space-between", }, + { + "columnGap": 12, + }, { "transform": [ { @@ -2397,74 +2411,66 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` ] } > - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -2847,12 +2845,14 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` style={ [ { - "borderRadius": 12, "borderWidth": 2, - "height": 24, "left": 0, "position": "absolute", "top": 0, + }, + { + "borderRadius": 12, + "height": 24, "width": 24, }, { @@ -2865,11 +2865,13 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` style={ [ { - "borderRadius": 12, - "height": 24, "left": 0, "position": "absolute", "top": 0, + }, + { + "borderRadius": 12, + "height": 24, "width": 24, }, { @@ -2889,9 +2891,10 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` Date: Thu, 7 Nov 2024 16:30:14 +0100 Subject: [PATCH 09/29] Add dynamic scale spacing to `Alert` --- src/components/alert/Alert.tsx | 93 +++++++++++++++------------------- src/components/stack/Stack.tsx | 74 ++++++++++++++++++--------- 2 files changed, 91 insertions(+), 76 deletions(-) diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx index ce1cc837..cd76d21d 100644 --- a/src/components/alert/Alert.tsx +++ b/src/components/alert/Alert.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useState } from "react"; import { GestureResponderEvent, NativeSyntheticEvent, - PixelRatio, Pressable, StyleSheet, TextLayoutEventData, @@ -25,10 +24,11 @@ import { IOColorsStatusForeground } from "../../core/IOColors"; import { IOAlertRadius } from "../../core/IOShapes"; -import { IOAlertSpacing } from "../../core/IOSpacing"; +import { IOAlertSpacing, IOSpacer } from "../../core/IOSpacing"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; -import { VSpacer } from "../spacer"; +import { HStack, VStack } from "../stack"; import { ButtonText } from "../typography"; import { H4 } from "../typography/H4"; import { Label } from "../typography/Label"; @@ -38,16 +38,6 @@ const iconSize: IOIconSizeScale = 24; const [spacingDefault, spacingFullWidth] = IOAlertSpacing; const styles = StyleSheet.create({ - container: { - flexDirection: "row", - alignItems: "flex-start", - alignContent: "center" - }, - spacingDefault: { - padding: spacingDefault, - borderRadius: IOAlertRadius, - borderCurve: "continuous" - }, spacingFullWidth: { padding: spacingFullWidth } @@ -123,6 +113,8 @@ export const Alert = React.forwardRef( viewRef ): JSX.Element => { const isPressed: SharedValue = useSharedValue(0); + const { dynamicFontScale, spacingScaleMultiplier } = + useIOFontDynamicScale(); const [isMultiline, setIsMultiline] = useState(false); @@ -133,6 +125,12 @@ export const Alert = React.forwardRef( [] ); + const spacingDefaultVariant = { + padding: spacingDefault, + borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier, + borderCurve: "continuous" + }; + // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState; @@ -166,48 +164,41 @@ export const Alert = React.forwardRef( }, [isPressed]); const renderMainBlock = () => ( - <> - - - + + {/* Sadly we don't have specific alignments style for text in React Native, like `text-box-trim` for CSS. So we have to put these magic numbers after manual adjustments. Tested on both Android and iOS. */} - {title && ( - <> + + {title && (

{title}

- - - )} - - {action && ( - <> - + )} + + {action && ( ( > {action} - - )} + )} + - + ); const StaticComponent = () => ( ( > ( - - {children} - -); +export const HStack = ({ + space = DEFAULT_SPACING_VALUE, + children, + style, + allowScaleSpacing +}: Stack) => { + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + + return ( + + {children} + + ); +}; /** Vertical Stack component @param {IOSpacer} space */ -export const VStack = ({ space, children, style }: Stack) => ( - - {children} - -); +export const VStack = ({ + space = DEFAULT_SPACING_VALUE, + children, + style, + allowScaleSpacing +}: Stack) => { + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + + return ( + + {children} + + ); +}; From 229737591c8cf1301d5d3027d7fc6268dce34769 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 7 Nov 2024 17:43:53 +0100 Subject: [PATCH 10/29] Add dynamic space scaling to `FeatureInfo` and `Pictogram` --- src/components/banner/Banner.tsx | 19 ++++---- src/components/featureInfo/FeatureInfo.tsx | 53 +++++++++++----------- src/components/pictograms/Pictogram.tsx | 29 ++++++++++-- src/components/pictograms/types.ts | 4 +- 4 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 6ed840d6..e6c9b4da 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -8,8 +8,9 @@ import { ViewStyle } from "react-native"; import Animated, { - Extrapolate, + Extrapolation, interpolate, + SharedValue, useAnimatedStyle, useDerivedValue, useSharedValue, @@ -41,7 +42,7 @@ const colorContent: IOColors = "grey-700"; const colorCloseButton: IconButton["color"] = "neutral"; const sizePictogramBig: IOPictogramSizeScale = 80; const sizePictogramSmall: IOPictogramSizeScale = 64; -const closeButtonDistanceFromEdge: number = 4; +const closeButtonDistanceFromEdge: number = 6; const closeButtonOpacity = 0.6; const sizeBigPadding = IOBannerBigSpacing; const sizeSmallHPadding = IOBannerSmallHSpacing; @@ -157,9 +158,9 @@ export const Banner = ({ onClose, accessibilityHint, accessibilityLabel, - testID, + testID }: Banner) => { - const isPressed: Animated.SharedValue = useSharedValue(0); + const isPressed: SharedValue = useSharedValue(0); // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState; @@ -178,7 +179,7 @@ export const Banner = ({ progressPressed.value, [0, 1], [1, animationScaleValue], - Extrapolate.CLAMP + Extrapolation.CLAMP ); return { @@ -197,7 +198,9 @@ export const Banner = ({ /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action if they are present. */ - const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" "); + const fallbackAccessibilityLabel = [title, content, action] + .filter(Boolean) + .join(" "); const renderMainBlock = () => ( <> @@ -211,8 +214,6 @@ export const Banner = ({ > {title && ( <> - {/* Once we get 'gap' property, we can get rid of - these components */}
{title}
@@ -227,7 +228,7 @@ export const Banner = ({ )} {action && ( /* Disable pointer events to avoid - pressed state on the button */ + pressed state on the button */ ( - + {iconName && ( - + )} {pictogramName && ( - + )} - - + {renderNode(body)} {action && ( - <> - {/* Add "marginTop" equivalent if body text is present. - This verbose code could be deleted once we got "gap" - property support */} - {body && } - - + )} - - + + ); diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx index 9873ef95..b4efa371 100644 --- a/src/components/pictograms/Pictogram.tsx +++ b/src/components/pictograms/Pictogram.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from "react"; import { ColorValue } from "react-native"; import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import PictogramAccessDenied from "./svg/PictogramAccessDenied"; import PictogramActivate from "./svg/PictogramActivate"; @@ -111,7 +112,7 @@ import PictogramSmile from "./svg/PictogramSmile"; import PictogramStar from "./svg/PictogramStar"; import PictogramTiming from "./svg/PictogramTiming"; import PictogramWalletDoc from "./svg/PictogramWalletDoc"; -import { IOPictogramSizeScale, SVGPictogramProps } from "./types"; +import { SVGPictogramProps } from "./types"; export const IOPictograms = { // Start legacy pictograms // @@ -188,6 +189,8 @@ export const IOPictograms = { export type IOPictograms = keyof typeof IOPictograms; +export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180; + type IOPictogramsProps = { name: IOPictograms; color?: IOColors; @@ -196,6 +199,7 @@ type IOPictogramsProps = { component props. */ pictogramStyle?: "default" | "light-content" | "dark-content"; size?: IOPictogramSizeScale | "100%"; + allowFontScaling?: boolean; }; type PictogramPalette = { @@ -210,10 +214,18 @@ export const Pictogram = ({ color = "aqua", pictogramStyle = "default", size = 120, + allowFontScaling = false, ...props }: IOPictogramsProps) => { - const PictogramElement = IOPictograms[name]; const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + + const PictogramElement = IOPictograms[name]; + + const pictogramSize = + allowFontScaling && typeof size === "number" + ? size * dynamicFontScale * spacingScaleMultiplier + : size; const themeObj = useMemo(() => { switch (pictogramStyle) { @@ -239,7 +251,7 @@ export const Pictogram = ({ return ( @@ -352,11 +364,18 @@ export const PictogramBleed = ({ color = "aqua", size = 80, pictogramStyle = "default", + allowFontScaling = false, ...props }: IOPictogramsProps) => { + const theme = useIOTheme(); + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const PictogramElement = IOPictogramsBleed[name as IOPictogramsBleed]; - const theme = useIOTheme(); + const pictogramSize = + allowFontScaling && typeof size === "number" + ? size * dynamicFontScale * spacingScaleMultiplier + : size; const themeObj = useMemo(() => { switch (pictogramStyle) { @@ -382,7 +401,7 @@ export const PictogramBleed = ({ return ( diff --git a/src/components/pictograms/types.ts b/src/components/pictograms/types.ts index 0ffb7a52..e8109e0d 100644 --- a/src/components/pictograms/types.ts +++ b/src/components/pictograms/types.ts @@ -1,9 +1,7 @@ import { ColorValue } from "react-native"; -export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180; - export type SVGPictogramProps = { - size: IOPictogramSizeScale | "100%"; + size: number | "100%"; color: ColorValue; colorValues: Record; }; From 173c84937967b38869fa946563079f13b820c071 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 8 Nov 2024 14:48:40 +0100 Subject: [PATCH 11/29] Update `reanimated` to `3.15.0` --- example/package.json | 2 +- example/yarn.lock | 272 ++++++++++++++++++++++++++++++++++++++++++- package.json | 2 +- yarn.lock | 272 ++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 538 insertions(+), 10 deletions(-) diff --git a/example/package.json b/example/package.json index 3c58487a..e583bda6 100644 --- a/example/package.json +++ b/example/package.json @@ -25,7 +25,7 @@ "react-native-gesture-handler": "^2.12.1", "react-native-haptic-feedback": "^2.0.3", "react-native-linear-gradient": "^2.8.1", - "react-native-reanimated": "3.12.0", + "react-native-reanimated": "3.15.0", "react-native-safe-area-context": "^4.7.1", "react-native-screens": "^3.23.0", "react-native-svg": "^15.1.0", diff --git a/example/yarn.lock b/example/yarn.lock index 30c8a84b..124ac6f5 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -38,11 +38,25 @@ "@babel/highlight" "^7.24.7" picocolors "^1.0.0" +"@babel/code-frame@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" + integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== + dependencies: + "@babel/helper-validator-identifier" "^7.25.9" + js-tokens "^4.0.0" + picocolors "^1.0.0" + "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== +"@babel/compat-data@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e" + integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg== + "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.20.0": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.9.tgz#bd96492c68822198f33e8a256061da3cf391f58f" @@ -94,6 +108,17 @@ "@jridgewell/trace-mapping" "^0.3.25" jsesc "^2.5.1" +"@babel/generator@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f" + integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw== + dependencies: + "@babel/parser" "^7.26.2" + "@babel/types" "^7.26.0" + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + jsesc "^3.0.2" + "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -101,6 +126,13 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-annotate-as-pure@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" + integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== + dependencies: + "@babel/types" "^7.25.9" + "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.22.9": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz#f9d0a7aaaa7cd32a3f31c9316a69f5a9bcacb892" @@ -112,6 +144,17 @@ lru-cache "^5.1.1" semver "^6.3.1" +"@babel/helper-compilation-targets@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875" + integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ== + dependencies: + "@babel/compat-data" "^7.25.9" + "@babel/helper-validator-option" "^7.25.9" + browserslist "^4.24.0" + lru-cache "^5.1.1" + semver "^6.3.1" + "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.22.9": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.9.tgz#c36ea240bb3348f942f08b0fbe28d6d979fab236" @@ -127,6 +170,19 @@ "@babel/helper-split-export-declaration" "^7.22.6" semver "^6.3.1" +"@babel/helper-create-class-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83" + integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" + "@babel/traverse" "^7.25.9" + semver "^6.3.1" + "@babel/helper-create-regexp-features-plugin@^7.22.5": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz#9d8e61a8d9366fe66198f57c40565663de0825f6" @@ -136,6 +192,15 @@ regexpu-core "^5.3.1" semver "^6.3.1" +"@babel/helper-create-regexp-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26" + integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + regexpu-core "^6.1.1" + semver "^6.3.1" + "@babel/helper-define-polyfill-provider@^0.4.1": version "0.4.1" resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.1.tgz#af1429c4a83ac316a6a8c2cc8ff45cb5d2998d3a" @@ -187,6 +252,14 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-member-expression-to-functions@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" + integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== + dependencies: + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/helper-module-imports@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c" @@ -212,6 +285,13 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-optimise-call-expression@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" + integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== + dependencies: + "@babel/types" "^7.25.9" + "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" @@ -222,6 +302,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878" integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg== +"@babel/helper-plugin-utils@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46" + integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw== + "@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.5": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz#53a25b7484e722d7efb9c350c75c032d4628de82" @@ -240,6 +325,15 @@ "@babel/helper-member-expression-to-functions" "^7.22.5" "@babel/helper-optimise-call-expression" "^7.22.5" +"@babel/helper-replace-supers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5" + integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/traverse" "^7.25.9" + "@babel/helper-simple-access@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de" @@ -262,6 +356,14 @@ "@babel/traverse" "^7.24.7" "@babel/types" "^7.24.7" +"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" + integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== + dependencies: + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/helper-split-export-declaration@^7.22.6": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" @@ -279,6 +381,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d" integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ== +"@babel/helper-string-parser@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" + integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== + "@babel/helper-validator-identifier@^7.22.20": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" @@ -294,11 +401,21 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== +"@babel/helper-validator-identifier@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" + integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== + "@babel/helper-validator-option@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac" integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw== +"@babel/helper-validator-option@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" + integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== + "@babel/helper-wrap-function@^7.22.9": version "7.22.9" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.9.tgz#189937248c45b0182c1dcf32f3444ca153944cb9" @@ -360,6 +477,13 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.0.tgz#9fdc9237504d797b6e7b8f66e78ea7f570d256ad" integrity sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA== +"@babel/parser@^7.25.9", "@babel/parser@^7.26.2": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11" + integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ== + dependencies: + "@babel/types" "^7.26.0" + "@babel/plugin-proposal-async-generator-functions@^7.0.0": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326" @@ -586,6 +710,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-class-properties@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f" + integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/plugin-transform-classes@^7.0.0": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz#e04d7d804ed5b8501311293d1a0e6d43e94c3363" @@ -601,6 +733,18 @@ "@babel/helper-split-export-declaration" "^7.22.6" globals "^11.1.0" +"@babel/plugin-transform-classes@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52" + integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-compilation-targets" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/traverse" "^7.25.9" + globals "^11.1.0" + "@babel/plugin-transform-computed-properties@^7.0.0": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz#cd1e994bf9f316bd1c2dafcd02063ec261bb3869" @@ -815,6 +959,14 @@ "@babel/helper-create-regexp-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-unicode-regex@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1" + integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/preset-flow@^7.13.13": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.22.5.tgz#876f24ab6b38bd79703a93f32020ca2162312784" @@ -885,6 +1037,15 @@ "@babel/parser" "^7.25.0" "@babel/types" "^7.25.0" +"@babel/template@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016" + integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/traverse@^7.20.0", "@babel/traverse@^7.22.6", "@babel/traverse@^7.22.8": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" @@ -914,6 +1075,19 @@ debug "^4.3.1" globals "^11.1.0" +"@babel/traverse@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84" + integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/generator" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/template" "^7.25.9" + "@babel/types" "^7.25.9" + debug "^4.3.1" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.5", "@babel/types@^7.3.3": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe" @@ -941,6 +1115,14 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" +"@babel/types@^7.25.9", "@babel/types@^7.26.0": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff" + integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA== + dependencies: + "@babel/helper-string-parser" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@egjs/hammerjs@^2.0.17": version "2.0.17" resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" @@ -1953,6 +2135,16 @@ browserslist@^4.21.9: node-releases "^2.0.12" update-browserslist-db "^1.0.11" +browserslist@^4.24.0: + version "4.24.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580" + integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg== + dependencies: + caniuse-lite "^1.0.30001669" + electron-to-chromium "^1.5.41" + node-releases "^2.0.18" + update-browserslist-db "^1.1.1" + bser@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -2017,6 +2209,11 @@ caniuse-lite@^1.0.30001503: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz#90fabae294215c3495807eb24fc809e11dc2f0a8" integrity sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA== +caniuse-lite@^1.0.30001669: + version "1.0.30001679" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001679.tgz#18c573b72f72ba70822194f6c39e7888597f9e32" + integrity sha512-j2YqID/YwpLnKzCmBOS4tlZdWprXm3ZmQLBH9ZBXFOhoxLA46fwyBvx6toCBWBmnuwUY/qB3kEU6gFx8qgCroA== + chalk@^2.0.0, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -2393,6 +2590,11 @@ electron-to-chromium@^1.4.431: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.466.tgz#17193d70f203da3d52a89c653b8d89f47a51d79d" integrity sha512-TSkRvbXRXD8BwhcGlZXDsbI2lRoP8dvqR7LQnqQNk9KxXBc4tG8O+rTuXgTyIpEdiqSGKEBSqrxdqEntnjNncA== +electron-to-chromium@^1.5.41: + version "1.5.55" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz#73684752aa2e1aa49cafb355a41386c6637e76a9" + integrity sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg== + emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" @@ -2440,6 +2642,11 @@ escalade@^3.1.1: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" @@ -3240,6 +3447,11 @@ jsesc@^2.5.1: resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== +jsesc@^3.0.2, jsesc@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" + integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -4120,6 +4332,11 @@ node-releases@^2.0.12: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== +node-releases@^2.0.18: + version "2.0.18" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f" + integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g== + node-stream-zip@^1.9.1: version "1.15.0" resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.15.0.tgz#158adb88ed8004c6c49a396b50a6a5de3bca33ea" @@ -4336,6 +4553,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +picocolors@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -4502,16 +4724,19 @@ react-native-linear-gradient@^2.8.1: resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.1.tgz#e4284f3cb1ba403b8c03364f7569f0c9e4101862" integrity sha512-934R4Bnjo7mYT38W9ypS1Dq/YW6TgyGdkHg+w72HNxN0ZDKG1GqAnZ6XlicMUYJDh7ViiJAKN8eOF3Ho0N4J0Q== -react-native-reanimated@3.12.0: - version "3.12.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.12.0.tgz#2c768d43971bb19e425c436c892bf68c74b9ccab" - integrity sha512-Bwa4jKL/QttnV8pQYiX+1N5a6XgL8yZtMyH+7UbEaW7ZeNCv1Pxp2PmYu/bP3LafCkmS9Yj/hY2adYNKe58g9A== +react-native-reanimated@3.15.0: + version "3.15.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.15.0.tgz#8814af7c78bbdf4c92bbd583f2266febf962e66a" + integrity sha512-yGxOyYAAu/5CyjonM2SgsM5sviiiK8HiHL9jT1bKfRxMLnNX9cFP8/UXRkbMT7ZXIfOlCvNFR0AqnphpuXIPVA== dependencies: "@babel/plugin-transform-arrow-functions" "^7.0.0-0" + "@babel/plugin-transform-class-properties" "^7.0.0-0" + "@babel/plugin-transform-classes" "^7.0.0-0" "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0" "@babel/plugin-transform-optional-chaining" "^7.0.0-0" "@babel/plugin-transform-shorthand-properties" "^7.0.0-0" "@babel/plugin-transform-template-literals" "^7.0.0-0" + "@babel/plugin-transform-unicode-regex" "^7.0.0-0" "@babel/preset-typescript" "^7.16.7" convert-source-map "^2.0.0" invariant "^2.2.4" @@ -4653,6 +4878,13 @@ regenerate-unicode-properties@^10.1.0: dependencies: regenerate "^1.4.2" +regenerate-unicode-properties@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0" + integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA== + dependencies: + regenerate "^1.4.2" + regenerate@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" @@ -4675,6 +4907,30 @@ regexpu-core@^5.3.1: unicode-match-property-ecmascript "^2.0.0" unicode-match-property-value-ecmascript "^2.1.0" +regexpu-core@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac" + integrity sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw== + dependencies: + regenerate "^1.4.2" + regenerate-unicode-properties "^10.2.0" + regjsgen "^0.8.0" + regjsparser "^0.11.0" + unicode-match-property-ecmascript "^2.0.0" + unicode-match-property-value-ecmascript "^2.1.0" + +regjsgen@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab" + integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q== + +regjsparser@^0.11.0: + version "0.11.2" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.11.2.tgz#7404ad42be00226d72bcf1f003f1f441861913d8" + integrity sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA== + dependencies: + jsesc "~3.0.2" + regjsparser@^0.9.1: version "0.9.1" resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" @@ -5197,6 +5453,14 @@ update-browserslist-db@^1.0.11: escalade "^3.1.1" picocolors "^1.0.0" +update-browserslist-db@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5" + integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.0" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e" diff --git a/package.json b/package.json index 36c4f11c..3d30585c 100644 --- a/package.json +++ b/package.json @@ -191,7 +191,7 @@ "react-native-gesture-handler": "^2.12.0", "react-native-haptic-feedback": "^2.0.2", "react-native-linear-gradient": "^2.5.6", - "react-native-reanimated": "3.12.0", + "react-native-reanimated": "3.15.0", "react-native-safe-area-context": "^3.3.2", "react-native-svg": "^15.1.0", "rn-placeholder": "1.3.3" diff --git a/yarn.lock b/yarn.lock index 9fc6fe3e..32039d36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -38,11 +38,25 @@ "@babel/highlight" "^7.24.7" picocolors "^1.0.0" +"@babel/code-frame@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" + integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== + dependencies: + "@babel/helper-validator-identifier" "^7.25.9" + js-tokens "^4.0.0" + picocolors "^1.0.0" + "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": version "7.22.9" resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== +"@babel/compat-data@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e" + integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg== + "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.14.0", "@babel/core@^7.18.5", "@babel/core@^7.20.0", "@babel/core@^7.22.0", "@babel/core@^7.22.9", "@babel/core@^7.7.5": version "7.22.11" resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.11.tgz#8033acaa2aa24c3f814edaaa057f3ce0ba559c24" @@ -124,6 +138,17 @@ "@jridgewell/trace-mapping" "^0.3.25" jsesc "^2.5.1" +"@babel/generator@^7.25.9": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f" + integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw== + dependencies: + "@babel/parser" "^7.26.2" + "@babel/types" "^7.26.0" + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + jsesc "^3.0.2" + "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -131,6 +156,13 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-annotate-as-pure@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" + integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== + dependencies: + "@babel/types" "^7.25.9" + "@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5": version "7.22.10" resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz#573e735937e99ea75ea30788b57eb52fab7468c9" @@ -160,6 +192,17 @@ lru-cache "^5.1.1" semver "^6.3.1" +"@babel/helper-compilation-targets@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875" + integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ== + dependencies: + "@babel/compat-data" "^7.25.9" + "@babel/helper-validator-option" "^7.25.9" + browserslist "^4.24.0" + lru-cache "^5.1.1" + semver "^6.3.1" + "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5": version "7.22.11" resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.11.tgz#4078686740459eeb4af3494a273ac09148dfb213" @@ -175,6 +218,19 @@ "@babel/helper-split-export-declaration" "^7.22.6" semver "^6.3.1" +"@babel/helper-create-class-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83" + integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" + "@babel/traverse" "^7.25.9" + semver "^6.3.1" + "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5": version "7.22.9" resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz#9d8e61a8d9366fe66198f57c40565663de0825f6" @@ -184,6 +240,15 @@ regexpu-core "^5.3.1" semver "^6.3.1" +"@babel/helper-create-regexp-features-plugin@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26" + integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + regexpu-core "^6.1.1" + semver "^6.3.1" + "@babel/helper-define-polyfill-provider@^0.4.2": version "0.4.2" resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7" @@ -235,6 +300,14 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-member-expression-to-functions@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" + integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== + dependencies: + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/helper-module-imports@^7.22.15": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" @@ -278,6 +351,13 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-optimise-call-expression@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" + integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== + dependencies: + "@babel/types" "^7.25.9" + "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": version "7.22.5" resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" @@ -288,6 +368,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878" integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg== +"@babel/helper-plugin-utils@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46" + integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw== + "@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9": version "7.22.9" resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz#53a25b7484e722d7efb9c350c75c032d4628de82" @@ -306,6 +391,15 @@ "@babel/helper-member-expression-to-functions" "^7.22.5" "@babel/helper-optimise-call-expression" "^7.22.5" +"@babel/helper-replace-supers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5" + integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.25.9" + "@babel/helper-optimise-call-expression" "^7.25.9" + "@babel/traverse" "^7.25.9" + "@babel/helper-simple-access@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de" @@ -328,6 +422,14 @@ "@babel/traverse" "^7.24.7" "@babel/types" "^7.24.7" +"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" + integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== + dependencies: + "@babel/traverse" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/helper-split-export-declaration@^7.22.6": version "7.22.6" resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" @@ -345,6 +447,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d" integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ== +"@babel/helper-string-parser@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" + integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== + "@babel/helper-validator-identifier@^7.22.20": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" @@ -360,6 +467,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== +"@babel/helper-validator-identifier@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" + integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== + "@babel/helper-validator-option@^7.22.15": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" @@ -370,6 +482,11 @@ resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac" integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw== +"@babel/helper-validator-option@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" + integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== + "@babel/helper-wrap-function@^7.22.9": version "7.22.10" resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz#d845e043880ed0b8c18bd194a12005cb16d2f614" @@ -431,6 +548,13 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.0.tgz#9fdc9237504d797b6e7b8f66e78ea7f570d256ad" integrity sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA== +"@babel/parser@^7.25.9", "@babel/parser@^7.26.2": + version "7.26.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11" + integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ== + dependencies: + "@babel/types" "^7.26.0" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e" @@ -739,6 +863,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-class-properties@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f" + integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/plugin-transform-class-properties@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz#97a56e31ad8c9dc06a0b3710ce7803d5a48cca77" @@ -771,6 +903,18 @@ "@babel/helper-split-export-declaration" "^7.22.6" globals "^11.1.0" +"@babel/plugin-transform-classes@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52" + integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.25.9" + "@babel/helper-compilation-targets" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/helper-replace-supers" "^7.25.9" + "@babel/traverse" "^7.25.9" + globals "^11.1.0" + "@babel/plugin-transform-computed-properties@^7.0.0", "@babel/plugin-transform-computed-properties@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz#cd1e994bf9f316bd1c2dafcd02063ec261bb3869" @@ -1187,6 +1331,14 @@ "@babel/helper-create-regexp-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-unicode-regex@^7.0.0-0": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1" + integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.25.9" + "@babel/helper-plugin-utils" "^7.25.9" + "@babel/plugin-transform-unicode-sets-regex@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz#77788060e511b708ffc7d42fdfbc5b37c3004e91" @@ -1379,6 +1531,15 @@ "@babel/parser" "^7.25.0" "@babel/types" "^7.25.0" +"@babel/template@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016" + integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/types" "^7.25.9" + "@babel/traverse@^7.1.6", "@babel/traverse@^7.20.0", "@babel/traverse@^7.22.11", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.2", "@babel/traverse@^7.7.4": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" @@ -1408,6 +1569,19 @@ debug "^4.3.1" globals "^11.1.0" +"@babel/traverse@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84" + integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw== + dependencies: + "@babel/code-frame" "^7.25.9" + "@babel/generator" "^7.25.9" + "@babel/parser" "^7.25.9" + "@babel/template" "^7.25.9" + "@babel/types" "^7.25.9" + debug "^4.3.1" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.22.11", "@babel/types@^7.22.5", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.22.11" resolved "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz#0e65a6a1d4d9cbaa892b2213f6159485fe632ea2" @@ -1435,6 +1609,14 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" +"@babel/types@^7.25.9", "@babel/types@^7.26.0": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff" + integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA== + dependencies: + "@babel/helper-string-parser" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@base2/pretty-print-object@1.0.1": version "1.0.1" resolved "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4" @@ -5602,6 +5784,16 @@ browserslist@^4.14.5, browserslist@^4.20.4, browserslist@^4.21.10, browserslist@ node-releases "^2.0.13" update-browserslist-db "^1.0.11" +browserslist@^4.24.0: + version "4.24.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580" + integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg== + dependencies: + caniuse-lite "^1.0.30001669" + electron-to-chromium "^1.5.41" + node-releases "^2.0.18" + update-browserslist-db "^1.1.1" + bser@2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -5787,6 +5979,11 @@ caniuse-lite@^1.0.30001517: resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz" integrity sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw== +caniuse-lite@^1.0.30001669: + version "1.0.30001679" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001679.tgz#18c573b72f72ba70822194f6c39e7888597f9e32" + integrity sha512-j2YqID/YwpLnKzCmBOS4tlZdWprXm3ZmQLBH9ZBXFOhoxLA46fwyBvx6toCBWBmnuwUY/qB3kEU6gFx8qgCroA== + case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" @@ -7164,6 +7361,11 @@ electron-to-chromium@^1.4.477: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.505.tgz#00571ade5975b58413f0f56a665b065bfc29cdfc" integrity sha512-0A50eL5BCCKdxig2SsCXhpuztnB9PfUgRMojj5tMvt8O54lbwz3t6wNgnpiTRosw5QjlJB7ixhVyeg8daLQwSQ== +electron-to-chromium@^1.5.41: + version "1.5.55" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz#73684752aa2e1aa49cafb355a41386c6637e76a9" + integrity sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg== + emitter-listener@^1.0.1, emitter-listener@^1.1.1: version "1.1.2" resolved "https://registry.npmjs.org/emitter-listener/-/emitter-listener-1.1.2.tgz#56b140e8f6992375b3d7cb2cab1cc7432d9632e8" @@ -7422,6 +7624,11 @@ escalade@^3.1.1: resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + escape-goat@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081" @@ -10396,6 +10603,11 @@ jsesc@^2.5.1: resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== +jsesc@^3.0.2, jsesc@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" + integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -11740,6 +11952,11 @@ node-releases@^2.0.13: resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== +node-releases@^2.0.18: + version "2.0.18" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f" + integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g== + node-stream-zip@^1.9.1: version "1.15.0" resolved "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz#158adb88ed8004c6c49a396b50a6a5de3bca33ea" @@ -12360,6 +12577,11 @@ picocolors@^1.0.0: resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +picocolors@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -12957,16 +13179,19 @@ react-native-linear-gradient@^2.5.6: resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.2.tgz#9811c91751be673ef928ef4aa3ff3a70b82935d6" integrity sha512-hgmCsgzd58WNcDCyPtKrvxsaoETjb/jLGxis/dmU3Aqm2u4ICIduj4ECjbil7B7pm9OnuTkmpwXu08XV2mpg8g== -react-native-reanimated@3.12.0: - version "3.12.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.12.0.tgz#2c768d43971bb19e425c436c892bf68c74b9ccab" - integrity sha512-Bwa4jKL/QttnV8pQYiX+1N5a6XgL8yZtMyH+7UbEaW7ZeNCv1Pxp2PmYu/bP3LafCkmS9Yj/hY2adYNKe58g9A== +react-native-reanimated@3.15.0: + version "3.15.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.15.0.tgz#8814af7c78bbdf4c92bbd583f2266febf962e66a" + integrity sha512-yGxOyYAAu/5CyjonM2SgsM5sviiiK8HiHL9jT1bKfRxMLnNX9cFP8/UXRkbMT7ZXIfOlCvNFR0AqnphpuXIPVA== dependencies: "@babel/plugin-transform-arrow-functions" "^7.0.0-0" + "@babel/plugin-transform-class-properties" "^7.0.0-0" + "@babel/plugin-transform-classes" "^7.0.0-0" "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0" "@babel/plugin-transform-optional-chaining" "^7.0.0-0" "@babel/plugin-transform-shorthand-properties" "^7.0.0-0" "@babel/plugin-transform-template-literals" "^7.0.0-0" + "@babel/plugin-transform-unicode-regex" "^7.0.0-0" "@babel/preset-typescript" "^7.16.7" convert-source-map "^2.0.0" invariant "^2.2.4" @@ -13274,6 +13499,13 @@ regenerate-unicode-properties@^10.1.0: dependencies: regenerate "^1.4.2" +regenerate-unicode-properties@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0" + integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA== + dependencies: + regenerate "^1.4.2" + regenerate@^1.4.2: version "1.4.2" resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" @@ -13325,6 +13557,18 @@ regexpu-core@^5.3.1: unicode-match-property-ecmascript "^2.0.0" unicode-match-property-value-ecmascript "^2.1.0" +regexpu-core@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac" + integrity sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw== + dependencies: + regenerate "^1.4.2" + regenerate-unicode-properties "^10.2.0" + regjsgen "^0.8.0" + regjsparser "^0.11.0" + unicode-match-property-ecmascript "^2.0.0" + unicode-match-property-value-ecmascript "^2.1.0" + registry-auth-token@^5.0.1: version "5.0.2" resolved "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz#8b026cc507c8552ebbe06724136267e63302f756" @@ -13339,6 +13583,18 @@ registry-url@^6.0.0: dependencies: rc "1.2.8" +regjsgen@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab" + integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q== + +regjsparser@^0.11.0: + version "0.11.2" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.11.2.tgz#7404ad42be00226d72bcf1f003f1f441861913d8" + integrity sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA== + dependencies: + jsesc "~3.0.2" + regjsparser@^0.9.1: version "0.9.1" resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" @@ -14973,6 +15229,14 @@ update-browserslist-db@^1.0.11: escalade "^3.1.1" picocolors "^1.0.0" +update-browserslist-db@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5" + integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.0" + update-notifier@6.0.2: version "6.0.2" resolved "https://registry.npmjs.org/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60" From 329bf928e44fafcaf8fbb283362a5da21f8d57f0 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 8 Nov 2024 16:32:03 +0100 Subject: [PATCH 12/29] Add `allowFontScaling` optional prop to `Badge` and `Tag` --- example/src/pages/Badges.tsx | 18 +++++++++++++++++ src/components/badge/Badge.tsx | 29 ++++++++++++++++++++------- src/components/tag/Tag.tsx | 36 +++++++++++++++++++++------------- 3 files changed, 62 insertions(+), 21 deletions(-) diff --git a/example/src/pages/Badges.tsx b/example/src/pages/Badges.tsx index 663c6a44..3851ab12 100644 --- a/example/src/pages/Badges.tsx +++ b/example/src/pages/Badges.tsx @@ -96,6 +96,17 @@ const renderBadge = () => ( + + + + + + ); @@ -139,5 +150,12 @@ const renderTag = () => ( + + + ); diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index 33469d68..9520300d 100644 --- a/src/components/badge/Badge.tsx +++ b/src/components/badge/Badge.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Platform, StyleSheet, View } from "react-native"; +import { Platform, StyleSheet, View, ViewStyle } from "react-native"; import { IOBadgeHSpacing, IOBadgeRadius, @@ -15,6 +15,7 @@ import { IOText } from "../typography"; export type Badge = WithTestID<{ outline?: boolean; text: string; + allowFontScaling?: boolean; variant: | "default" | "info" @@ -49,13 +50,24 @@ const styles = StyleSheet.create({ textAlignVertical: "center" } }) + }, + badgeStaticStyle: { + borderRadius: IOBadgeRadius, + paddingHorizontal: IOBadgeHSpacing, + paddingVertical: IOBadgeVSpacing } }); /** * Official badge component */ -export const Badge = ({ text, outline = false, variant, testID }: Badge) => { +export const Badge = ({ + text, + outline = false, + allowFontScaling = true, + variant, + testID +}: Badge) => { const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); const { dynamicFontScale } = useIOFontDynamicScale(); @@ -146,17 +158,19 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => { outline ? mapOutlineVariants : mapVariants )[variant]; + const dynamicStyle: ViewStyle = { + borderRadius: IOBadgeRadius * dynamicFontScale, + paddingHorizontal: IOBadgeHSpacing * dynamicFontScale, + paddingVertical: IOBadgeVSpacing * dynamicFontScale + }; + return ( { ]} > ; + > & { + allowFontScaling?: boolean; + }; const IOTagIconMargin: IOSpacingScale = 6; const IOTagIconSize: IOIconSizeScale = 16; @@ -72,6 +74,12 @@ const styles = StyleSheet.create({ borderColor: IOColors["grey-100"], borderCurve: "continuous" }, + tagStatic: { + paddingHorizontal: IOTagHSpacing, + paddingVertical: IOTagVSpacing, + columnGap: IOTagIconMargin, + borderRadius: IOTagRadius + }, iconWrapper: { flexShrink: 1 } @@ -134,7 +142,8 @@ export const Tag = ({ variant, testID, customIconProps, - iconAccessibilityLabel + iconAccessibilityLabel, + allowFontScaling = true }: Tag) => { const theme = useIOTheme(); const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); @@ -142,19 +151,17 @@ export const Tag = ({ const variantProps = getVariantProps(variant, customIconProps); + const tagDynamic: ViewStyle = { + paddingHorizontal: IOTagHSpacing * dynamicFontScale, + paddingVertical: IOTagVSpacing * dynamicFontScale, + columnGap: IOTagIconMargin * dynamicFontScale * spacingScaleMultiplier, + borderRadius: IOTagRadius * dynamicFontScale + }; + return ( {pipe( variantProps, @@ -164,7 +171,7 @@ export const Tag = ({ ({ iconColor, iconName }) => ( Date: Fri, 8 Nov 2024 17:45:55 +0100 Subject: [PATCH 13/29] Update `jest` snapshot --- src/components/badge/__test__/__snapshots__/badge.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap index fdecf198..c7e1c5df 100644 --- a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap @@ -75,7 +75,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = ` } > Date: Thu, 21 Nov 2024 16:59:43 +0100 Subject: [PATCH 14/29] Improve code after code review suggestion --- src/components/alert/Alert.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx index b979551a..d30718bc 100644 --- a/src/components/alert/Alert.tsx +++ b/src/components/alert/Alert.tsx @@ -28,9 +28,9 @@ import { HStack, VStack } from "../stack"; import { Body, ButtonText } from "../typography"; import { H4 } from "../typography/H4"; -const iconSize: IOIconSizeScale = 24; +const ICON_SIZE: IOIconSizeScale = 24; -const [spacingDefault, spacingFullWidth] = IOAlertSpacing; +const [padding, paddingFullWidth] = IOAlertSpacing; type AlertProps = WithTestID<{ variant: "error" | "warning" | "info" | "success"; @@ -143,8 +143,8 @@ export const Alert = React.forwardRef( [] ); - const spacingDefaultVariant = { - padding: spacingDefault, + const paddingDefaultVariant = { + padding, borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier, borderCurve: "continuous" }; @@ -195,7 +195,7 @@ export const Alert = React.forwardRef( {/* Sadly we don't have specific alignments style for text @@ -239,7 +239,7 @@ export const Alert = React.forwardRef( ( > Date: Thu, 21 Nov 2024 17:22:14 +0100 Subject: [PATCH 15/29] Improve code of `CheckboxLabel` --- src/components/checkbox/CheckboxLabel.tsx | 24 +++++++++++------------ src/components/stack/Stack.tsx | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx index 6a79a06f..540507c5 100644 --- a/src/components/checkbox/CheckboxLabel.tsx +++ b/src/components/checkbox/CheckboxLabel.tsx @@ -1,10 +1,14 @@ import * as React from "react"; import { ComponentProps, useState } from "react"; import { Pressable, View } from "react-native"; -import { IOSelectionTickVisualParams, useIOTheme } from "../../core"; -import { IOStyles } from "../../core/IOStyles"; +import { + IOSelectionTickVisualParams, + IOSpacingScale, + useIOTheme +} from "../../core"; import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback"; import { useIOFontDynamicScale } from "../../utils/accessibility"; +import { HStack } from "../stack"; import { H6 } from "../typography/H6"; import { AnimatedCheckbox } from "./AnimatedCheckbox"; @@ -15,6 +19,7 @@ type Props = { }; const DISABLED_OPACITY = 0.5; +const CHECKBOX_MARGIN: IOSpacingScale = 8; // disabled: the component is no longer touchable // onPress: @@ -66,15 +71,10 @@ export const CheckboxLabel = ({ // inheritance on Android needsOffscreenAlphaCompositing={true} > - {label}

- + ); }; diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx index 85eb9a49..1eacc06a 100644 --- a/src/components/stack/Stack.tsx +++ b/src/components/stack/Stack.tsx @@ -5,7 +5,7 @@ import { useIOFontDynamicScale } from "../../utils/accessibility"; type AllowedStyleProps = Pick< ViewStyle, - "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" + "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width" >; type Stack = { From 1356455401d511f03e55844d734d7c98553755bb Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 21 Nov 2024 17:35:17 +0100 Subject: [PATCH 16/29] Fix `tsc` error --- src/components/checkbox/CheckboxLabel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx index 540507c5..4d342b1c 100644 --- a/src/components/checkbox/CheckboxLabel.tsx +++ b/src/components/checkbox/CheckboxLabel.tsx @@ -41,7 +41,7 @@ export const CheckboxLabel = ({ onValueChange }: OwnProps) => { const theme = useIOTheme(); - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale } = useIOFontDynamicScale(); const [toggleValue, setToggleValue] = useState(checked ?? false); From 142806717968c176a7b5138a71a0e2fbc275ab6e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 25 Nov 2024 15:01:53 +0100 Subject: [PATCH 17/29] Add `fontScale` to `AndroidManifest` in the example app --- example/android/app/src/main/AndroidManifest.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml index 4122f36a..60cd5265 100644 --- a/example/android/app/src/main/AndroidManifest.xml +++ b/example/android/app/src/main/AndroidManifest.xml @@ -12,7 +12,7 @@ From 6a96bae1f86b698542fbe5833ba889ecbcce0eda Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 26 Nov 2024 14:57:41 +0100 Subject: [PATCH 18/29] Increase value of the `maxFontSizeMultiplier` --- example/src/pages/ListItem.tsx | 3 +++ src/utils/fonts.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx index 0ecda9fe..e8a85a4d 100644 --- a/example/src/pages/ListItem.tsx +++ b/example/src/pages/ListItem.tsx @@ -243,6 +243,7 @@ const renderListItemInfoCopy = () => ( }} accessibilityLabel="Empty just for testing purposes" /> + ( accessibilityLabel="Empty just for testing purposes" icon="institution" /> + ( accessibilityLabel="Empty just for testing purposes" icon="creditCard" /> + Date: Tue, 26 Nov 2024 15:02:59 +0100 Subject: [PATCH 19/29] Hide decorative icon when the text size is huge --- src/components/listitems/ListItemAmount.tsx | 5 +++-- src/components/listitems/ListItemCheckbox.tsx | 5 +++-- src/components/listitems/ListItemHeader.tsx | 5 +++-- src/components/listitems/ListItemInfo.tsx | 5 +++-- src/components/listitems/ListItemInfoCopy.tsx | 5 +++-- src/components/listitems/ListItemNav.tsx | 5 +++-- src/components/listitems/ListItemRadio.tsx | 5 +++-- src/components/listitems/ListItemSwitch.tsx | 4 ++-- src/components/modules/ModuleCredential.tsx | 6 +++++- src/components/modules/ModuleNavigation.tsx | 4 +++- src/utils/accessibility.ts | 3 +++ 11 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/listitems/ListItemAmount.tsx b/src/components/listitems/ListItemAmount.tsx index da8f136e..6cf1eb14 100644 --- a/src/components/listitems/ListItemAmount.tsx +++ b/src/components/listitems/ListItemAmount.tsx @@ -42,7 +42,8 @@ export const ListItemAmount = ({ testID }: ListItemAmount) => { const theme = useIOTheme(); - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = + useIOFontDynamicScale(); const listItemAccessibilityLabel = useMemo( () => (accessibilityLabel ? accessibilityLabel : `${label}`), @@ -72,7 +73,7 @@ export const ListItemAmount = ({ { columnGap: iconMargin * dynamicFontScale * spacingScaleMultiplier } ]} > - {iconName && ( + {iconName && !hugeFontEnabled && ( { - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = + useIOFontDynamicScale(); const [toggleValue, setToggleValue] = useState(selected ?? false); // Animations @@ -172,7 +173,7 @@ export const ListItemCheckbox = ({ } ]} > - {icon && ( + {icon && !hugeFontEnabled && ( { const theme = useIOTheme(); - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = + useIOFontDynamicScale(); const listItemAccessibilityLabel = useMemo( () => (accessibilityLabel ? accessibilityLabel : `${label}`), @@ -132,7 +133,7 @@ export const ListItemHeader = ({ style={IOListItemStyles.listItemInner} importantForAccessibility={endElement ? "auto" : "no-hide-descendants"} > - {iconName && ( + {iconName && !hugeFontEnabled && ( { const theme = useIOTheme(); - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = + useIOFontDynamicScale(); const componentValueToAccessibility = useMemo( () => (typeof value === "string" ? value : ""), @@ -154,7 +155,7 @@ export const ListItemInfo = ({ } ]} > - {icon && ( + {icon && !hugeFontEnabled && ( (typeof value === "string" ? value : ""), @@ -161,7 +162,7 @@ export const ListItemInfoCopy = ({ animatedScaleStyle ]} > - {icon && ( + {icon && !hugeFontEnabled && ( @@ -252,7 +253,7 @@ export const ListItemNav = ({ - Image URL (for payment logos) - Avatar */} - {icon && ( + {icon && !hugeFontEnabled && ( { const [toggleValue, setToggleValue] = useState(selected ?? false); - const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = + useIOFontDynamicScale(); // Animations const isPressed: SharedValue = useSharedValue(0); // Scaling transformation applied when the button is pressed @@ -255,7 +256,7 @@ export const ListItemRadio = ({ spacingScaleMultiplier }} > - {startImage?.icon && ( + {startImage?.icon && !hugeFontEnabled && ( { const theme = useIOTheme(); - const { dynamicFontScale, spacingScaleMultiplier } = + const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } = useIOFontDynamicScale(); // If we have a badge or we are loading, we can't render the switch @@ -111,7 +111,7 @@ export const ListItemSwitch = React.memo( })} accessibilityState={{ disabled }} > - {icon && ( + {icon && !hugeFontEnabled && ( ) => { const theme = useIOTheme(); + const { hugeFontEnabled } = useIOFontDynamicScale(); + if (props.isLoading) { return ; } @@ -64,8 +67,9 @@ const ModuleCredential = (props: WithTestID) => { ...pressableProps } = props; - const iconComponent = icon && ( + const iconComponent = icon && !hugeFontEnabled && ( ) => { const theme = useIOTheme(); + const { hugeFontEnabled } = useIOFontDynamicScale(); if (props.isLoading) { return ; @@ -53,7 +55,7 @@ export const ModuleNavigation = (props: WithTestID) => { const { icon, image, title, subtitle, onPress, badge, ...pressableProps } = props; - const iconComponent = icon && ( + const iconComponent = icon && !hugeFontEnabled && ( { export const useIOFontDynamicScale = (): { dynamicFontScale: number; spacingScaleMultiplier: number; + hugeFontEnabled: boolean; } => { const { isExperimental } = useIOExperimentalDesign(); const { fontScale } = useWindowDimensions(); const deviceFontScale = isExperimental ? fontScale : 1; + const hugeFontEnabled = deviceFontScale >= 1.5; const dynamicFontScale = Math.min(deviceFontScale, IOFontSizeMultiplier); /* We make the spacing dynamic based on the font scale, but we multiply @@ -56,6 +58,7 @@ export const useIOFontDynamicScale = (): { dynamicFontScale <= IOFontSizeMultiplier ? 1 : 0.8; return { + hugeFontEnabled, dynamicFontScale, spacingScaleMultiplier }; From 54dbacfd8c13ddbd5f4192bb9deb71cf24635cf1 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 26 Nov 2024 15:04:17 +0100 Subject: [PATCH 20/29] Update `jest` snapshots --- .../__snapshots__/advice.test.tsx.snap | 4 +- .../__snapshots__/badge.test.tsx.snap | 4 +- .../__snapshots__/banner.test.tsx.snap | 8 +- .../__snapshots__/button.test.tsx.snap | 12 +-- .../__snapshots__/listitem.test.tsx.snap | 52 ++++++------ .../__snapshots__/NumberPad.test.tsx.snap | 20 ++--- .../ToastNotification.test.tsx.snap | 24 +++--- .../ComposedBodyFromArray.test.tsx.snap | 84 +++++++++---------- .../__snapshots__/typography.test.tsx.snap | 50 +++++------ 9 files changed, 129 insertions(+), 129 deletions(-) diff --git a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap index 882d7233..54566b3c 100644 --- a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap +++ b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap @@ -86,7 +86,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = ` Date: Tue, 26 Nov 2024 17:43:34 +0100 Subject: [PATCH 21/29] Enable scaled `Icon` in `IconButton` and `IconButtonSolid` --- src/components/buttons/IconButton.tsx | 2 ++ src/components/buttons/IconButtonSolid.tsx | 1 + 2 files changed, 3 insertions(+) diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx index a214fa32..4be4fb16 100644 --- a/src/components/buttons/IconButton.tsx +++ b/src/components/buttons/IconButton.tsx @@ -197,6 +197,7 @@ export const IconButton = ({ > {!disabled ? ( ) : ( Date: Tue, 26 Nov 2024 17:44:07 +0100 Subject: [PATCH 22/29] Enable scaled `Icon` in the `ButtonSolid` --- src/components/buttons/ButtonSolid.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx index e52c4727..1e566aa9 100644 --- a/src/components/buttons/ButtonSolid.tsx +++ b/src/components/buttons/ButtonSolid.tsx @@ -53,6 +53,7 @@ const legacyStyles = StyleSheet.create({ }); const colorPrimaryButtonDisabled: IOColors = "grey-200"; +const ICON_MARGIN = 8; const DISABLED_OPACITY = 0.5; // Icon size @@ -308,6 +309,9 @@ export const ButtonSolid = React.forwardRef( ( // exiting={exitTransitionInnerContent} > {icon && ( - <> - {/* If 'iconPosition' is set to 'end', we use - reverse flex property to invert the position */} - - {/* Once we have support for 'gap' property, - we can get rid of that spacer */} - - + )} Date: Tue, 26 Nov 2024 17:47:45 +0100 Subject: [PATCH 23/29] Update `jest` snapshot --- .../buttons/__test__/__snapshots__/button.test.tsx.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap index 4a639f21..66190386 100644 --- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap +++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap @@ -294,6 +294,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`] "flexDirection": "row", "justifyContent": "center", }, + { + "columnGap": 8, + }, false, ] } @@ -1011,6 +1014,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "columnGap": 8, + }, false, ] } From d69ca41cd2dd3ca50602371fac9d5f790f7653f4 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 26 Nov 2024 17:50:12 +0100 Subject: [PATCH 24/29] Remove unused import --- src/components/buttons/ButtonSolid.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx index 1e566aa9..6a8d390c 100644 --- a/src/components/buttons/ButtonSolid.tsx +++ b/src/components/buttons/ButtonSolid.tsx @@ -29,7 +29,6 @@ import { import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; -import { HSpacer } from "../spacer/Spacer"; import { ButtonText } from "../typography/ButtonText"; export type ButtonSolidColor = "primary" | "danger" | "contrast"; From b7d3ad4a8c81973278c2299805420469a510851e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 27 Nov 2024 17:37:05 +0100 Subject: [PATCH 25/29] Enable scaled icon in the `ButtonLink` and `ButtonOutline` --- src/components/buttons/ButtonLink.tsx | 39 ++++++++++++------------ src/components/buttons/ButtonOutline.tsx | 39 ++++++++++++------------ 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx index 978b8e9d..80651645 100644 --- a/src/components/buttons/ButtonLink.tsx +++ b/src/components/buttons/ButtonLink.tsx @@ -25,7 +25,6 @@ import { IOIcons, IconClassComponent } from "../icons"; -import { HSpacer } from "../spacer/Spacer"; import { IOText, buttonTextFontSize } from "../typography"; export type ColorButtonLink = "primary" | "contrast"; @@ -96,6 +95,7 @@ const mapLegacyColorStates: Record< }; const DISABLED_OPACITY = 0.5; +const ICON_MARGIN = 8; export const ButtonLink = React.forwardRef( ( @@ -209,30 +209,29 @@ export const ButtonLink = React.forwardRef( IOButtonStyles.buttonLink, iconPosition === "end" && { flexDirection: "row-reverse" }, disabled ? { opacity: DISABLED_OPACITY } : {}, + { columnGap: ICON_MARGIN }, /* Prevent Reanimated from overriding background colors if button is disabled */ !disabled && pressedAnimationStyle ]} > - {icon && ( - <> - {!disabled ? ( - - ) : ( - - )} - - - )} + {icon && + (!disabled ? ( + + ) : ( + + ))} ( isExperimental && fullWidth && { paddingHorizontal: 16 }, buttonStylesLocal.buttonWithBorder, buttonStyles.buttonSizeDefault, + { columnGap: ICON_MARGIN }, iconPosition === "end" && { flexDirection: "row-reverse" }, disabled ? { @@ -354,25 +355,23 @@ export const ButtonOutline = React.forwardRef( !disabled && pressedAnimationStyle ]} > - {icon && ( - <> - {!disabled ? ( - - ) : ( - - )} - - - )} + {icon && + (!disabled ? ( + + ) : ( + + ))} Date: Wed, 27 Nov 2024 17:37:39 +0100 Subject: [PATCH 26/29] =?UTF-8?q?Add=20scaled=20margins=20in=20the=20`Head?= =?UTF-8?q?er=E2=80=A6`=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/HeaderFirstLevel.tsx | 32 +++++++-------------- src/components/layout/HeaderSecondLevel.tsx | 19 ++++-------- 2 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src/components/layout/HeaderFirstLevel.tsx b/src/components/layout/HeaderFirstLevel.tsx index 3cba07d3..e563adae 100644 --- a/src/components/layout/HeaderFirstLevel.tsx +++ b/src/components/layout/HeaderFirstLevel.tsx @@ -15,13 +15,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; import { alertEdgeToEdgeInsetTransitionConfig, IOColors, - IOStyles, IOVisualCostants, useIOTheme } from "../../core"; import { WithTestID } from "../../utils/types"; import { IconButton } from "../buttons"; -import { HSpacer } from "../spacer"; +import { HStack } from "../stack"; import { H3 } from "../typography"; import { HeaderActionProps } from "./common"; @@ -136,27 +135,18 @@ export const HeaderFirstLevel = ({ {title}
- + {type === "threeActions" && ( - <> - - {/* Ideally, with the "gap" flex property, - we can get rid of these ugly constructs */} - - + )} {(type === "twoActions" || type === "threeActions") && ( - <> - - {/* Same as above */} - - + )} {type !== "base" && ( )} - + ); diff --git a/src/components/layout/HeaderSecondLevel.tsx b/src/components/layout/HeaderSecondLevel.tsx index 3a9f75ed..f4edfd07 100644 --- a/src/components/layout/HeaderSecondLevel.tsx +++ b/src/components/layout/HeaderSecondLevel.tsx @@ -24,7 +24,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; import { IOColors, IOSpringValues, - IOStyles, IOVisualCostants, alertEdgeToEdgeInsetTransitionConfig, hexToRgba, @@ -37,6 +36,7 @@ import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing"; import { WithTestID } from "../../utils/types"; import IconButton from "../buttons/IconButton"; import { HSpacer } from "../spacer"; +import { HStack } from "../stack"; import { IOText } from "../typography"; import { HeaderActionProps } from "./common"; @@ -310,28 +310,19 @@ export const HeaderSecondLevel = ({ {title} - + {type === "threeActions" && ( - <> - - {/* Same as above */} - - + )} {(type === "twoActions" || type === "threeActions") && ( - <> - - {/* Ideally, with the "gap" flex property, - we can get rid of these ugly constructs */} - - + )} {type !== "base" ? ( ) : ( )} - + ); From 62e7f2596863d991c32b935cc9efe6e8a84b81cd Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 27 Nov 2024 17:46:32 +0100 Subject: [PATCH 27/29] Update `jest` snapshot --- .../__test__/__snapshots__/button.test.tsx.snap | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap index 66190386..78b29476 100644 --- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap +++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap @@ -60,6 +60,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`] }, false, {}, + { + "columnGap": 8, + }, { "transform": [ { @@ -160,6 +163,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1 { "height": 48, }, + { + "columnGap": 8, + }, false, { "backgroundColor": "rgba(231,236,252,0)", @@ -782,6 +788,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = ` }, false, {}, + { + "columnGap": 8, + }, { "transform": [ { @@ -881,6 +890,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = ` { "height": 40, }, + { + "columnGap": 8, + }, false, { "backgroundColor": "rgba(0,115,230,0)", From 0d58e5b84df678fcc0ea05e094480a1d170bdbee Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 29 Nov 2024 11:59:22 +0100 Subject: [PATCH 28/29] =?UTF-8?q?Enable=20scaled=20chevron=20in=20the=20`L?= =?UTF-8?q?istItem=E2=80=A6`=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/listitems/ListItemNav.tsx | 1 + src/components/listitems/ListItemNavAlert.tsx | 1 + src/components/listitems/ListItemTransaction.tsx | 1 + src/utils/accessibility.ts | 2 +- 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx index bcb93add..3360091f 100644 --- a/src/components/listitems/ListItemNav.tsx +++ b/src/components/listitems/ListItemNav.tsx @@ -279,6 +279,7 @@ export const ListItemNav = ({ {loading && } {!loading && !hideChevron && ( {listItemNavAlertContent} = 1.5; + const hugeFontEnabled = deviceFontScale >= 1.35; const dynamicFontScale = Math.min(deviceFontScale, IOFontSizeMultiplier); /* We make the spacing dynamic based on the font scale, but we multiply From 3912dee520a188bc3dace44d7ed4b91239bbc23d Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 5 Dec 2024 17:38:38 +0100 Subject: [PATCH 29/29] Update `MainActivity.java` to prevent app crash in the example app --- .../src/main/java/com/exampleapp/MainActivity.java | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/example/android/app/src/main/java/com/exampleapp/MainActivity.java b/example/android/app/src/main/java/com/exampleapp/MainActivity.java index ca4a01d3..9148620f 100644 --- a/example/android/app/src/main/java/com/exampleapp/MainActivity.java +++ b/example/android/app/src/main/java/com/exampleapp/MainActivity.java @@ -5,6 +5,8 @@ import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; import com.facebook.react.defaults.DefaultReactActivityDelegate; +import android.os.Bundle; + public class MainActivity extends ReactActivity { /** @@ -16,6 +18,16 @@ protected String getMainComponentName() { return "ExampleApp"; } + /** + * Avoid crashing the application when the user changes the `fontScale` attribute + * and the UI is updated accordingly. + * To learn more: https://github.com/pagopa/io-app-design-system/pull/348 + */ + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(null); + } + /** * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React