@ledgerhq/native-ui 0.12.2-nightly.1 → 0.13.0-nightly.3

package/lib/components/Cards/CardA/ColoredGradient.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Svg from "react-native-svg";
+export type Props = {
+    color: string;
+    opacityColor: string;
+    style?: React.ComponentProps<typeof Svg>["style"];
+};
+export default function Gradient({ color, opacityColor, style }: Props): JSX.Element;

package/lib/components/Cards/CardA/ColoredGradient.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Svg, { LinearGradient, Defs, Stop, Rect } from "react-native-svg";
+import styled from "styled-components/native";
+const StyledSVG = styled(Svg) `
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+`;
+export default function Gradient({ color, opacityColor, style }) {
+    return (React.createElement(StyledSVG, { style: style },
+        React.createElement(Defs, null,
+            React.createElement(LinearGradient, { id: "myGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", gradientUnits: "userSpaceOnUse" },
+                React.createElement(Stop, { key: "0%", offset: "40%", stopOpacity: 1, stopColor: color }),
+                React.createElement(Stop, { key: "100%", offset: "100%", stopOpacity: 0, stopColor: color }))),
+        React.createElement(Rect, { rx: 8, x: "0", y: "0", width: "100%", height: "100%", opacity: 1, fill: "url(#myGradient)" }),
+        React.createElement(Rect, { rx: 8, x: "0", y: "0", width: "100%", height: "100%", opacity: 0.6, fill: opacityColor })));
+}

package/lib/components/Cards/CardA/ShadowGradient.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import Svg from "react-native-svg";
+export type Props = React.ComponentProps<typeof Svg> & {
+    color: string;
+};
+export default function Gradient({ color }: Props): JSX.Element;

package/lib/components/Cards/CardA/ShadowGradient.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Svg, { LinearGradient, Defs, Stop, Rect } from "react-native-svg";
+import styled from "styled-components/native";
+const StyledSVG = styled(Svg) `
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+`;
+export default function Gradient({ color }) {
+    return (React.createElement(StyledSVG, null,
+        React.createElement(Defs, null,
+            React.createElement(LinearGradient, { id: "myGradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", gradientUnits: "userSpaceOnUse" },
+                React.createElement(Stop, { key: "0%", offset: "0%", stopOpacity: 0.8, stopColor: color }),
+                React.createElement(Stop, { key: "100%", offset: "100%", stopOpacity: 0.25, stopColor: color }))),
+        React.createElement(Rect, { rx: 8, x: "0", y: "0", width: "100%", height: "100%", opacity: 1, fill: "url(#myGradient)" })));
+}

package/lib/components/Cards/CardA/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Props = {
+    variant?: "purple" | "red";
+    backgroundImage?: string;
+    tag?: string;
+    description?: string;
+    onPress?: () => void;
+    onDismiss?: () => void;
+};
+declare const CardA: ({ variant, backgroundImage, tag, description, onPress, onDismiss, }: Props) => React.ReactElement;
+export default CardA;

package/lib/components/Cards/CardA/index.js

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react";
+import { TouchableOpacity, Image } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import { Flex, Text, Icon } from "../../index";
+import { highlight } from "../helper";
+import ColoredGradient from "./ColoredGradient";
+import ShadowGradient from "./ShadowGradient";
+const ImageContent = styled(Image) `
+  border-radius: 8px;
+`;
+const CardA = ({ variant, backgroundImage, tag, description, onPress, onDismiss, }) => {
+    const { colors } = useTheme();
+    const backgroundVariants = useMemo(() => ({
+        purple: colors.primary.c80,
+        red: colors.error.c60,
+    }), [colors.primary.c80, colors.error.c60]);
+    const backgroundVariantColor = variant && backgroundVariants[variant]
+        ? backgroundVariants[variant]
+        : backgroundVariants.purple;
+    return (React.createElement(Flex, { borderRadius: 8 },
+        React.createElement(TouchableOpacity, { activeOpacity: 0.5, onPress: onPress },
+            backgroundImage ? (React.createElement(React.Fragment, null,
+                React.createElement(ImageContent, { source: {
+                        uri: backgroundImage,
+                    }, style: { width: "100%", height: "100%", position: "absolute" } }),
+                React.createElement(ShadowGradient, { color: colors.neutral.c00 }))) : (React.createElement(ColoredGradient, { color: backgroundVariantColor, opacityColor: colors.neutral.c20 })),
+            React.createElement(Flex, { p: 6 },
+                React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: 3 },
+                    React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
+                        React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)),
+                    React.createElement(TouchableOpacity, { onPress: onDismiss },
+                        React.createElement(Flex, { bg: "neutral.c30", top: -8, right: -8, p: "6px", borderRadius: 24 },
+                            React.createElement(Icon, { name: "Close", size: 12, color: "neutral.c100" })))),
+                description ? (React.createElement(Text, { variant: "h4", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 3, height: "84px", lineHeight: "28px" }, highlight(description, "h4"))) : null))));
+};
+export default CardA;

package/lib/components/Cards/CardB/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { TouchableOpacityProps, TouchableOpacity, Image } from "react-native";
+export type CardProps = TouchableOpacityProps & {
+    tag?: string;
+    title?: string;
+    cta?: string;
+    imageUrl?: string;
+    onPressDismiss?: () => void;
+};
+export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const Container: 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;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: string | number | undefined;
+}, never>;
+export declare const ImageContainer: 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;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: string | number | undefined;
+}, never>;
+export declare const ImageContent: import("styled-components").StyledComponent<typeof Image, import("styled-components").DefaultTheme, {}, never>;
+export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const CloseButton: (props: CardProps) => JSX.Element;
+declare const CardB: (props: CardProps) => React.ReactElement;
+export default CardB;

package/lib/components/Cards/CardB/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { ArrowRightMedium, CloseMedium } from "@ledgerhq/icons-ui/native";
+import { TouchableOpacity, Image } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import Link from "../../cta/Link";
+import { highlight } from "../helper";
+export const Base = styled(TouchableOpacity) `
+  border-radius: 8px;
+`;
+export const Container = styled(Flex) `
+  background: ${(p) => p.theme.colors.neutral.c20};
+  flex-direction: row;
+  border-radius: 8px;
+`;
+export const ImageContainer = styled(Flex) `
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  position: relative;
+`;
+export const ImageContent = styled(Image) `
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  opacity: 0.6;
+`;
+export const CloseContainer = styled(TouchableOpacity) `
+  background-color: ${(p) => p.theme.colors.neutral.c30};
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  border-radius: 50;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const CloseButton = (props) => {
+    const { colors } = useTheme();
+    return (React.createElement(CloseContainer, { onPress: props.onPressDismiss },
+        React.createElement(CloseMedium, { size: 14, color: colors.neutral.c100 })));
+};
+const ImageComponent = (props) => (React.createElement(ImageContainer, { width: props.imageUrl ? 115 : 0 },
+    React.createElement(ImageContent, { source: {
+            uri: props.imageUrl,
+        }, style: { width: "100%", height: "100%" } }),
+    React.createElement(CloseButton, { onPressDismiss: props.onPressDismiss })));
+const TextComponent = (props) => (React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start", p: "12px", flex: 1 },
+    React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c70", uppercase: true, numberOfLines: 1, maxWidth: "80%" }, props.tag),
+    props.title && (React.createElement(Text, { variant: "large", numberOfLines: 3, fontWeight: "semiBold", color: "neutral.c100", lineHeight: "18.2px" }, highlight(props.title, "large"))),
+    React.createElement(Link, { type: "main", size: "medium", iconPosition: "right", Icon: () => React.createElement(ArrowRightMedium, { color: "primary.c80" }), onPress: props.onPress, numberOfLines: 1 },
+        React.createElement(Text, { variant: "paragraph", fontWeight: "semiBold", color: "primary.c80", numberOfLines: 1 }, props.cta))));
+const CardContainer = (props) => {
+    const { imageUrl, onPressDismiss } = props;
+    return (React.createElement(Container, { height: 125 },
+        React.createElement(TextComponent, Object.assign({}, props)),
+        React.createElement(ImageComponent, { imageUrl: imageUrl, onPressDismiss: onPressDismiss })));
+};
+const CardB = (props) => {
+    return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5 }),
+        React.createElement(CardContainer, Object.assign({}, props))));
+};
+export default CardB;

package/lib/components/Cards/helper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseTextProps } from "../Text";
+declare function highlight(text: string, variant: BaseTextProps["variant"]): (string | JSX.Element)[];
+export { highlight };

package/lib/components/Cards/helper.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text } from "../../index";
+function highlight(text, variant) {
+    const textSplitted = text
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .split(/<bold>(.*?)<\/bold>/g);
+    const elems = [];
+    textSplitted.forEach((w, index) => {
+        if (index % 2 !== 0) {
+            const word = w.replace(/<bold>(.*?)<\/bold>/g, "$1");
+            elems.push(React.createElement(Text, { key: "highlighted_" + index, variant: variant, fontWeight: "semiBold", color: "primary.c80" }, word));
+        }
+        else {
+            elems.push(w);
+        }
+    });
+    return elems;
+}
+export { highlight };

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

@@ -0,0 +1,2 @@
+export { default as CardA } from "./CardA";
+export { default as CardB } from "./CardB";

package/lib/components/Cards/index.js

@@ -0,0 +1,2 @@
+export { default as CardA } from "./CardA";
+export { default as CardB } from "./CardB";

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

@@ -12,6 +12,7 @@ export type LinkProps = TouchableOpacityProps & {
     disabled?: boolean;
     reversed?: boolean;
     children?: React.ReactNode;
+    numberOfLines?: number;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
 declare const Link: (props: LinkProps) => React.ReactElement;

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

@@ -14,14 +14,14 @@ export const Base = styled(TouchableOpacity) `
   justify-content: center;
 `;
 const LinkContainer = (props) => {
-    const { Icon, iconPosition = "right", children, size = "medium", reversed, type = "main", disabled, } = props;
+    const { Icon, iconPosition = "right", children, size = "medium", reversed, type = "main", disabled, numberOfLines, } = props;
     const { colors } = useTheme();
     const colorValue = getLinkColors(colors)[reversed ? "reversed" : "default"][disabled ? "disabled" : type];
     return (React.createElement(React.Fragment, null,
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue, numberOfLines: numberOfLines }, children)) : null,
         Icon ? (React.createElement(IconContainer, { iconLink: !children, iconPosition: iconPosition },
             React.createElement(Icon, { size: ctaIconSize[size], color: colorValue }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue }, children)) : null));
+        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue, numberOfLines: numberOfLines }, children)) : null));
 };
 const Link = (props) => {
     const { type = "main", size = "medium" } = props;

package/lib/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./cta";
+export * from "./Cards";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";

package/lib/components/index.js

@@ -1,4 +1,5 @@
 export * from "./cta";
+export * from "./Cards";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.12.2-nightly.1",
+  "version": "0.13.0-nightly.3",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -38,11 +38,12 @@
     "moment": "^2.29.1",
     "react-native-animatable": "^1.3.3",
     "react-native-modal": "^13.0.0",
+    "react-native-svg": "^12.1.1",
     "rn-range-slider": "^2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.2.1",
-    "@ledgerhq/icons-ui": "^0.3.1-nightly.1",
+    "@ledgerhq/icons-ui": "^0.3.1-nightly.3",
     "@ledgerhq/ui-shared": "^0.1.10"
   },
   "peerDependencies": {
@@ -53,7 +54,6 @@
     "react": "^17.0.2",
     "react-native": ">=0.64.0",
     "react-native-reanimated": "~2.3.1",
-    "react-native-svg": "^12.1.1",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -131,7 +131,6 @@
     "react-native": "^0.68.5",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-reanimated": "^2.8.0",
-    "react-native-svg": "^12.1.1",
     "react-native-web": "~0.17.5",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",