@ledgerhq/native-ui 0.7.17-nightly.0 → 0.7.17

package/README.md

@@ -1,7 +1,8 @@
 # `@ledgerhq/native-ui`
 
+[![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/native.yml)
 [![npm](https://img.shields.io/npm/v/@ledgerhq/native-ui)](https://www.npmjs.com/package/@ledgerhq/native-ui)
-[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://native-ui-storybook.vercel.app)
+[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-native.vercel.app)
 
 ### Design and interface resources for React Native
 
@@ -9,7 +10,7 @@
 
 ## Reference
 
-**[🔗 Storybook](https://native-ui-storybook.vercel.app)**
+**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**
 
 ## Installation
 
@@ -29,6 +30,8 @@ npm i styled-components react-native-reanimated react-native-svg
 
 ### Additional setup
 
+**Skip this step if your project is managed by Expo.**
+
 Follow the installation instructions for:
 
 - [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)
@@ -83,10 +86,10 @@ import { useFonts } from "expo-font";
 */
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -104,8 +107,8 @@ Add the paths in the `react-native.config.js` file:
 ```js
 module.exports = {
   assets: [
-    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha",
-    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter",
+    "node_modules/@ledgerhq/native-ui/assets/fonts/alpha",
+    "node_modules/@ledgerhq/native-ui/assets/fonts/inter",
   ],
 };
 ```
@@ -135,10 +138,10 @@ function Logo() {
 
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -181,7 +184,7 @@ export default function App() {
 
 ```js
 import React from "react";
-import { StyleProvider } from "@ledgerhq/native-ui";
+import { StyleProvider } from "@ledgerhq/native-ui/styles";
 import { Flex, Text, Logos, Switch } from "@ledgerhq/native-ui";
 import { useTheme } from "styled-components/native";
 

package/{lib/components → 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;
-}, "alignItems" | "flexDirection" | "pl">;
+}, "pl" | "alignItems" | "flexDirection">;
 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;
-}, "alignItems" | "flexDirection" | "pr">;
+}, "pr" | "alignItems" | "flexDirection">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**

package/{lib/components → components}/Layout/Modals/BaseModal/index.d.ts

@@ -6,6 +6,7 @@ export declare type BaseModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
     modalStyle?: StyleProp<ViewStyle>;
+    safeContainerStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     preventBackdropClick?: boolean;
     Icon?: IconOrElementType;
@@ -17,4 +18,4 @@ export declare type BaseModalProps = {
     noCloseButton?: boolean;
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
-export default function BaseModal({ isOpen, onClose, noCloseButton, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;
+export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

package/{lib/components → components}/Layout/Modals/BaseModal/index.js

@@ -13,12 +13,11 @@ import React from "react";
 import ReactNativeModal from "react-native-modal";
 import styled from "styled-components/native";
 import sizes from "../../../../helpers/getDeviceSize";
-import Link from "../../../cta/Link";
-import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import Text from "../../../Text";
 import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
 import { space } from "styled-system";
+import { Icons } from "../../../../assets";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
   background-color: ${(p) => p.theme.colors.background.main};
@@ -39,10 +38,11 @@ const CloseContainer = styled.View `
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
-    p: 5,
-    m: -5,
+    p: 3,
 }) `
   ${space};
+  border-radius: 100px;
+  background-color: ${(p) => p.theme.colors.neutral.c30};
 `;
 const StyledTitle = styled(Text).attrs({ variant: "h2" }) `
   text-transform: uppercase;
@@ -69,7 +69,7 @@ export function ModalHeader({ Icon, iconColor, title, description, subtitle, })
         description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))));
 }
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, noCloseButton, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
+    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -78,11 +78,11 @@ export default function BaseModal(_a) {
             onSwipeComplete: onClose,
         };
     return (React.createElement(ReactNativeModal, Object.assign({}, rest, backDropProps, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
-        React.createElement(SafeContainer, null,
+        React.createElement(SafeContainer, { style: safeContainerStyle },
             React.createElement(Container, { style: containerStyle },
                 !noCloseButton && (React.createElement(CloseContainer, null,
                     React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-                        React.createElement(Link, { Icon: CloseMedium, onPress: onClose })))),
+                        React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" })))),
                 React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
                 React.createElement(ContentContainer, null, children)))));
 }

package/{lib/components → components}/Layout/Modals/BottomDrawer/index.js

@@ -18,6 +18,10 @@ const modalStyleOverrides = StyleSheet.create({
         justifyContent: "flex-end",
         margin: 0,
     },
+    safeContainer: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
     container: {
         minHeight: 0,
         paddingLeft: 24,
@@ -25,9 +29,11 @@ const modalStyleOverrides = StyleSheet.create({
         paddingTop: 24,
         paddingBottom: 24,
         maxHeight: "100%",
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
     },
 });
 export default function BottomDrawer(_a) {
     var { children } = _a, restProps = __rest(_a, ["children"]);
-    return (React.createElement(BaseModal, Object.assign({}, restProps, { modalStyle: modalStyleOverrides.modal, containerStyle: modalStyleOverrides.container, propagateSwipe: true }), children));
+    return (React.createElement(BaseModal, Object.assign({}, restProps, { modalStyle: modalStyleOverrides.modal, safeContainerStyle: modalStyleOverrides.safeContainer, containerStyle: modalStyleOverrides.container, propagateSwipe: true }), children));
 }

package/{lib/components → components}/chart/index.js

@@ -11,9 +11,7 @@ const sortByDate = (a, b) => {
         return 1;
     return 0;
 };
-const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
+const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
     const theme = useTheme();
     const sortData = useMemo(() => data.sort(sortByDate), [data]);
     const labelFormatted = useCallback(({ datum }) => {
@@ -52,11 +50,7 @@ xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, d
         grid: { display: "none" },
     }), [theme]);
     return (React.createElement(Flex, { justifyContent: "center", alignItems: "center" },
-        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { y: 5 }, padding: { top: 30, left: 60, right: 35, bottom: 35 }, maxDomain: { y: domainValues.max }, minDomain: { y: domainValues.min }, containerComponent: React.createElement(VictoryVoronoiContainer
-            // @ts-expect-error disable this error for the sake of the monorepo
-            , { 
-                // @ts-expect-error disable this error for the sake of the monorepo
-                disable: disableTooltips, voronoiBlacklist: ["victory-area"], labels: labelFormatted, labelComponent: React.createElement(VictoryTooltip, { centerOffset: { y: -10 }, renderInPortal: false, constrainToVisibleArea: true, style: {
+        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { y: 5 }, padding: { top: 30, left: 60, right: 35, bottom: 35 }, maxDomain: { y: domainValues.max }, minDomain: { y: domainValues.min }, containerComponent: React.createElement(VictoryVoronoiContainer, { disable: disableTooltips, voronoiBlacklist: ["victory-area"], labels: labelFormatted, labelComponent: React.createElement(VictoryTooltip, { centerOffset: { y: -10 }, renderInPortal: false, constrainToVisibleArea: true, style: {
                         fill: color,
                     }, flyoutPadding: 7, flyoutStyle: {
                         fill: backgroundColor,

package/{lib/components → components}/cta/Button/getButtonStyle.d.ts

@@ -5,6 +5,8 @@ export declare function getButtonColors(colors: Theme["colors"]): {
         primaryColor: string;
         secondaryColor: string;
         tertiaryColor?: string;
+        pressedColor?: string;
+        pressedOutlineColor?: string;
     };
 };
 export declare function getButtonColorStyle(colors: Theme["colors"], props: ButtonProps): {

package/{lib/components → components}/cta/Button/getButtonStyle.js

@@ -2,7 +2,7 @@ export function getButtonColors(colors) {
     return {
         default: {
             primaryColor: colors.neutral.c100,
-            secondaryColor: "rgba(0,0,0,0)",
+            secondaryColor: "rgba(0,0,255,0)",
         },
         disabled: {
             primaryColor: colors.neutral.c50,
@@ -11,41 +11,43 @@ export function getButtonColors(colors) {
         main: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
+            pressedColor: colors.neutral.c100a06,
+            pressedOutlineColor: colors.neutral.c100a01,
         },
         shade: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
             tertiaryColor: colors.neutral.c40,
+            pressedColor: colors.neutral.c100a06,
+            pressedOutlineColor: colors.neutral.c100a01,
         },
         error: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.error.c100,
+            pressedColor: colors.error.c100a07,
+            pressedOutlineColor: colors.error.c100a025,
         },
         color: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.primary.c80,
+            pressedColor: colors.primary.c80a70,
+            pressedOutlineColor: colors.primary.c70a025,
         },
     };
 }
 export function getButtonColorStyle(colors, props) {
     const { outline, type = "main", disabled } = props;
-    const { primaryColor, secondaryColor, tertiaryColor } = getButtonColors(colors)[disabled ? "disabled" : type];
+    const { primaryColor, secondaryColor, tertiaryColor, pressedColor, pressedOutlineColor } = getButtonColors(colors)[disabled ? "disabled" : type];
     if (outline) {
         return {
             text: { color: disabled ? primaryColor : secondaryColor },
-            button: {
-                backgroundColor: "transparent",
-                borderColor: disabled ? primaryColor : tertiaryColor !== null && tertiaryColor !== void 0 ? tertiaryColor : secondaryColor,
-                borderWidth: 1,
-            },
+            button: Object.assign({ backgroundColor: "transparent", borderColor: disabled ? primaryColor : tertiaryColor !== null && tertiaryColor !== void 0 ? tertiaryColor : secondaryColor, borderWidth: 1 }, (pressedOutlineColor && { underlayColor: pressedOutlineColor })),
         };
     }
     else {
         return {
             text: { color: primaryColor },
-            button: {
-                backgroundColor: secondaryColor,
-            },
+            button: Object.assign({ backgroundColor: secondaryColor }, (pressedColor && { underlayColor: pressedColor })),
         };
     }
 }