@ledgerhq/native-ui 0.20.0-nightly.1 → 0.20.1-next.0

package/lib/components/Carousel/index.js

@@ -117,7 +117,9 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
                 width: `${fullWidth}%`,
                 flexDirection: I18nManager.isRTL && Platform.OS !== "ios" ? "row-reverse" : "row",
             }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
-        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
+        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (
+        /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
+        React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
                 scrollToIndex(index);
                 setResetTimer({});
                 onManualChange && onManualChange(index);

package/lib/components/Form/Input/BaseInput/index.d.ts

@@ -58,7 +58,7 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
     alignItems: string;
     flexDirection: string;
     pl: string;
-}, "pl" | "alignItems" | "flexDirection">;
+}, "alignItems" | "flexDirection" | "pl">;
 export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
@@ -70,7 +70,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     alignItems: string;
     flexDirection: string;
     pr: string;
-}, "pr" | "alignItems" | "flexDirection">;
+}, "alignItems" | "flexDirection" | "pr">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**

package/lib/components/Form/SelectableList.js

@@ -14,7 +14,9 @@ function Element(props) {
             Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
                 React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }))),
             React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }, children || value),
-            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? RenderRight : React.createElement(RenderRight, Object.assign({}, props)))))));
+            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? (RenderRight) : (
+            /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
+            React.createElement(RenderRight, Object.assign({}, props))))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

package/lib/components/Icon/BoxedIcon.js

@@ -80,6 +80,8 @@ export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor
 };
 const BoxedIcon = (_a) => {
     var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(IconBox, Object.assign({}, iconBoxProps), React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps), React.isValidElement(Icon) ? (Icon) : (
+    /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
+    React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
 };
 export default BoxedIcon;

package/lib/components/Icon/IconBadge.js

@@ -15,6 +15,8 @@ export const DEFAULT_ICON_SIZE = 16;
 const BORDER_RADIUS = 999999;
 const IconBadge = (_a) => {
     var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: "neutral.c40", borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? Icon : React.createElement(Icon, { size: iconSize, color: iconColor })));
+    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: "neutral.c40", borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
+    /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
+    React.createElement(Icon, { size: iconSize, color: iconColor }))));
 };
 export default IconBadge;

package/lib/components/Icon/IconBox/index.js

@@ -15,5 +15,7 @@ const IconContainer = styled(Flex).attrs(({ size = DEFAULT_BOX_SIZE }) => ({
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, iconContainerProps, }) {
     const { colors } = useTheme();
-    return (React.createElement(IconContainer, Object.assign({ size: boxSize }, iconContainerProps), React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
+    return (React.createElement(IconContainer, Object.assign({ size: boxSize }, iconContainerProps), React.isValidElement(Icon) ? (Icon) : (
+    /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
+    React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

package/lib/components/Layout/Modals/BaseModal/index.d.ts

@@ -16,7 +16,8 @@ export type BaseModalProps = {
     subtitle?: string;
     children?: React.ReactNode;
     noCloseButton?: boolean;
+    CustomHeader?: React.ComponentType;
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
 export declare function ModalHeaderCloseButton({ onClose, }: Pick<BaseModalProps, "onClose">): React.ReactElement;
-export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, ...rest }: BaseModalProps): React.ReactElement;
+export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader, ...rest }: BaseModalProps): React.ReactElement;

package/lib/components/Layout/Modals/BaseModal/index.js

@@ -36,6 +36,7 @@ const CloseContainer = styled.View `
   display: flex;
   align-items: flex-end;
   margin-bottom: ${(p) => p.theme.space[6]}px;
+  z-index: 10;
 `;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
     p: 3,
@@ -74,7 +75,7 @@ export function ModalHeaderCloseButton({ onClose, }) {
             React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" }))));
 }
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide"]);
+    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -91,8 +92,9 @@ export default function BaseModal(_a) {
     }, [onClose, onModalHide]);
     return (React.createElement(ReactNativeModal, Object.assign({}, backDropProps, rest, { isVisible: !!isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onModalHideWithClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(SafeContainer, { style: safeContainerStyle },
+            CustomHeader && (React.createElement(CustomHeader, null, !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }))),
             React.createElement(Container, { style: containerStyle },
-                !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),
+                !CustomHeader && !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),
                 React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
                 React.createElement(ContentContainer, null, children)))));
 }

package/lib/components/Text/index.d.ts

@@ -13,8 +13,9 @@ export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps
     lineHeight?: string;
     bracket?: boolean;
     textTransform?: TextStyle["textTransform"];
+    testID?: string;
     uppercase?: boolean;
     children?: React.ReactNode;
 }
-declare const Text: ({ children, bracket, textAlign, ...props }: BaseTextProps) => JSX.Element;
+declare const Text: ({ children, bracket, textAlign, testID, ...props }: BaseTextProps) => JSX.Element;
 export default Text;

package/lib/components/Text/index.js

@@ -56,9 +56,9 @@ const BracketText = (_a) => {
         React.createElement(BracketRight, { fill: c, width: size, height: size })));
 };
 const Text = (_a) => {
-    var { children, bracket, textAlign = "left" } = _a, props = __rest(_a, ["children", "bracket", "textAlign"]);
+    var { children, bracket, textAlign = "left", testID } = _a, props = __rest(_a, ["children", "bracket", "textAlign", "testID"]);
     if (bracket)
         return React.createElement(BracketText, Object.assign({}, props), children);
-    return (React.createElement(Base, Object.assign({ textAlign: textAlign }, props), children));
+    return (React.createElement(Base, Object.assign({ textAlign: textAlign }, props, { testID: testID }), children));
 };
 export default Text;

package/lib/components/cta/Button/index.d.ts

@@ -15,6 +15,7 @@ export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     children?: React.ReactNode;
     pending?: boolean;
     displayContentWhenPending?: boolean;
+    testID?: string;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;

package/lib/components/cta/Button/index.js

@@ -69,9 +69,9 @@ const ButtonContainer = (props) => {
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "default", iconName, disabled = false, pending = false, displayContentWhenPending = false, } = props;
+    const { Icon, children, type = "default", iconName, disabled = false, pending = false, displayContentWhenPending = false, testID, } = props;
     const theme = useTheme();
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 1, disabled: disabled || pending }),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 1, disabled: disabled || pending, testID: testID }),
         React.createElement(View, null,
             React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: pending && !displayContentWhenPending })),
             pending && !displayContentWhenPending ? (React.createElement(SpinnerContainer, { displayContentWhenPending: displayContentWhenPending },

package/lib/components/message/Alert/index.d.ts

@@ -19,15 +19,15 @@ export interface AlertProps {
 }
 declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
 declare namespace Alert {
-    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
         flexShrink: 1;
         variant: "bodyLineHeight";
         fontWeight: "semiBold";
-    }, "fontWeight" | "variant" | "flexShrink">;
-    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+    }, "fontWeight" | "flexShrink" | "variant">;
+    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
         flexShrink: 1;
         variant: "bodyLineHeight";
         fontWeight: "semiBold";
-    }, "fontWeight" | "variant" | "flexShrink">;
+    }, "fontWeight" | "flexShrink" | "variant">;
 }
 export default Alert;

package/lib/styles/theme.d.ts

@@ -1,7 +1,7 @@
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
 export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "largeLineHeight", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny", "tinyAlpha"];
-export type TextVariants = typeof textVariants[number];
+export type TextVariants = (typeof textVariants)[number];
 export type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
 export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny" | "tinyAlpha">;
 export declare const radii: number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.20.0-nightly.1",
+  "version": "0.20.1-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.3.0",
-    "@ledgerhq/icons-ui": "^0.4.0",
+    "@ledgerhq/icons-ui": "^0.4.1-next.0",
     "@ledgerhq/ui-shared": "^0.2.0"
   },
   "peerDependencies": {
@@ -79,7 +79,6 @@
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/cli-server-api": "^7.0.3",
     "@react-native-community/datetimepicker": "6.7.3",
-    "@react-native-community/eslint-config": "^3.0.1",
     "@react-native-community/slider": "^4.4.2",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
@@ -105,8 +104,6 @@
     "@types/react-native": "0.71.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -115,11 +112,8 @@
     "babel-preset-expo": "^9.3.0",
     "camelcase": "^6.2.1",
     "csstype": "^3.0.11",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "expo": "~48.0.9",
     "expo-asset": "^8.9.1",
     "expo-constants": "^14.2.1",
@@ -138,7 +132,6 @@
     "metro-source-map": "^0.76.0",
     "metro-transform-worker": "^0.76.0",
     "minimatch": "^5.1.0",
-    "prettier": "^2.4.1",
     "prop-types": "^15.8.1",
     "react": "^18",
     "react-dom": "^18",