@ledgerhq/native-ui 0.16.0 → 0.17.0-recover-staging.0

package/lib/components/Layout/Divider/index.d.ts

@@ -1,10 +1,6 @@
-/// <reference types="styled-components-react-native" />
-declare const Divider: 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>;
+import React from "react";
+import { FlexBoxProps } from "../Flex";
+declare const Divider: React.FC<FlexBoxProps & {
+    text?: string;
+}>;
 export default Divider;

package/lib/components/Layout/Divider/index.js

@@ -1,8 +1,18 @@
+import React from "react";
 import Flex from "../Flex";
 import styled from "styled-components/native";
-const Divider = styled(Flex).attrs((p) => ({
+import { Text } from "../../..";
+const DividerBase = styled(Flex).attrs((p) => ({
     my: p.my || 4,
     height: 1,
     backgroundColor: "neutral.c40",
 })) ``;
+const Divider = (props) => {
+    if (!props.text)
+        return React.createElement(DividerBase, Object.assign({}, props));
+    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "row", alignItems: "center" }),
+        React.createElement(DividerBase, { flex: 1 }),
+        React.createElement(Text, { variant: "bodyLineHeight", color: "neutral.c60", mx: 6 }, props.text),
+        React.createElement(DividerBase, { flex: 1 })));
+};
 export default Divider;

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.d.ts

@@ -5,5 +5,10 @@ export type Props = FlexProps & {
     status: ItemStatus;
     isFirstItem?: boolean;
     isLastItem?: boolean;
+    topHeight?: number;
 };
-export default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props): JSX.Element;
+declare function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }: Props): JSX.Element;
+declare namespace TimelineIndicator {
+    var topSegmentDefaultHeight: number;
+}
+export default TimelineIndicator;

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -10,23 +10,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
+import { Dimensions, PixelRatio, Platform, StyleSheet } from "react-native";
 import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/native";
 import styled, { useTheme } from "styled-components/native";
+import Svg, { Line } from "react-native-svg";
 import Flex from "../../Flex";
-const TopSegment = styled(Flex) `
-  height: 20px;
-  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
-  border-style: solid;
-  border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
-  background: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
-`;
-const BottomSegment = styled(Flex) `
-  flex: 1;
-  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
-  border-style: solid;
-  border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
-  background: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
-`;
+const dashLength = 4;
+const linesWidth = 2;
+/**
+ * We have to set a fixed size for the lines (and then they get clipped with overflow:hidden)
+ * because their real height is dynamic (depends on the height of the step) and
+ * there seems to be no way to have that height being dynamic without having the
+ * scaling effect affecting the length of the stroke dash (the "- - - ").
+ * This is kind of a trick but seemingly the only way to have a nice stroke dash
+ **/
+const linesLength = 5000;
+const TopSegmentSvg = ({ status, hidden, height }) => {
+    const theme = useTheme();
+    const strokeColor = status === "inactive" ? theme.colors.neutral.c50 : theme.colors.primary.c80;
+    const strokeDashArray = status === "inactive" ? `${dashLength}` : undefined;
+    return (React.createElement(Flex, { height: height, width: "100%", overflow: "hidden" },
+        React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
+            React.createElement(Svg, { height: linesLength, width: linesWidth, viewBox: `0 0 ${linesWidth} ${linesLength}`, preserveAspectRatio: "xMinYMin slice" },
+                React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray })))));
+};
+const topSegmentDefaultHeight = Platform.OS === "android" ? 23 : 21; // difference due to how borders are drawn in android
+const BottomSegmentSvg = ({ status, hidden }) => {
+    const theme = useTheme();
+    const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c50;
+    const strokeDashArray = status === "completed" ? undefined : `${dashLength}`;
+    return (React.createElement(Flex, { flex: 1, width: "100%", style: { transform: [{ scaleY: -1 }] }, overflow: "hidden" },
+        React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
+            React.createElement(Svg, { height: 2 * Dimensions.get("screen").height, width: linesWidth, viewBox: `0 0 ${linesWidth} ${linesLength}`, preserveAspectRatio: "xMinYMin slice" },
+                React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
+};
 const getIconBackground = (theme, status, isLastItem) => {
     if (status === "completed") {
         return "transparent";
@@ -48,20 +65,21 @@ const getIconBorder = (theme, status, isLastItem) => {
     }
     return theme.colors.primary.c80;
 };
-const CenterSegment = styled(Flex) `
+const CenterCircle = styled(Flex) `
   border-radius: 9999px;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
   border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
   align-items: center;
   justify-content: center;
 `;
 export default function TimelineIndicator(_a) {
-    var { status, isFirstItem, isLastItem } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem"]);
+    var { status, isFirstItem, isLastItem, topHeight } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem", "topHeight"]);
     const { colors } = useTheme();
     return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
-        React.createElement(TopSegment, { status: status, hidden: isFirstItem }),
-        React.createElement(CenterSegment, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 24 }))),
-        React.createElement(BottomSegment, { status: status, hidden: isLastItem })));
+        React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
+        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 20 }))),
+        React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
 }
+TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts

@@ -7,5 +7,6 @@ export type Props = {
     isLastItem?: boolean;
     setActiveIndex?: (_: number) => void;
     index: number;
+    withExtraMarginOnActiveStep?: boolean;
 };
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }: Props): JSX.Element;
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }: Props): JSX.Element;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -1,47 +1,42 @@
 import React, { useCallback } from "react";
 import { Pressable } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import styled from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import Tag from "../../../tags/Tag";
 import TimelineIndicator from "./TimelineIndicator";
-const getContainerBackground = (theme, status, isLastItem) => {
-    if (isLastItem && status === "completed") {
-        return theme.colors.success.c30;
-    }
-    else if (status === "completed") {
-        return theme.colors.primary.c20;
+const getContainerBackground = (theme, status) => {
+    if (status === "completed") {
+        return "transparent";
     }
     else if (status === "active") {
         return theme.colors.neutral.c20;
     }
-    return theme.colors.neutral.c30;
+    return "transparent";
 };
 const getContainerBorder = (theme, status, isLastItem) => {
-    if (isLastItem && status === "completed") {
-        return theme.colors.success.c30;
+    if (status === "completed") {
+        return "transparent";
     }
     else if (isLastItem && status === "active") {
         return theme.colors.success.c100;
     }
-    else if (status === "completed") {
-        return theme.colors.primary.c20;
-    }
     else if (status === "active") {
-        return theme.colors.primary.c80;
+        return theme.colors.neutral.c40;
     }
-    return theme.colors.neutral.c30;
+    return "transparent";
 };
 const Container = styled(Flex) `
   flex: 1;
   border-radius: ${(p) => p.theme.radii[2]}px;
-  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
+  background: ${(p) => getContainerBackground(p.theme, p.status)};
   border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
   padding: 20px 16px;
 `;
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }) {
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }) {
     var _a;
+    const theme = useTheme();
     /**
      * Having an initial value of null will prevent having "height: 0" before the
      * initial call of onLayout.
@@ -69,14 +64,16 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
     }, [setActiveIndex, index]);
     return (React.createElement(Pressable, { onPress: handlePress },
         React.createElement(Flex, { flexDirection: "row" },
-            React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
-            React.createElement(Container, { status: item.status, isLastItem: isLastItem, mb: 4 },
+            React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4, topHeight: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active"
+                    ? TimelineIndicator.topSegmentDefaultHeight + theme.space[4]
+                    : undefined }),
+            React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
-                    React.createElement(Text, { variant: "body", flexShrink: 1, color: item.status === "inactive"
-                            ? "neutral.c80"
-                            : isLastItem
-                                ? "success.c100"
-                                : "primary.c90" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),
+                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
+                            ? "success.c80"
+                            : item.status === "active"
+                                ? "primary.c80"
+                                : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),
                     (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
                         ? formatEstimatedTime(item.estimatedTime)
                         : `${item.estimatedTime / 60} min`))),

package/lib/components/Layout/List/VerticalTimeline/index.d.ts

@@ -1,13 +1,22 @@
-/// <reference types="react" />
+import React from "react";
+import { BaseTextProps } from "../../../Text";
 import { BaseStyledProps } from "src/components/styled";
 import { Item } from "../types";
 export type Props = BaseStyledProps & {
     steps?: Item[];
     formatEstimatedTime?: (_: number) => string;
     setActiveIndex?: (arg0: number) => void;
+    header?: React.ReactNode;
+    /**
+     * Should the scroll view automatically scroll to the active step.
+     * Defaults to true.
+     * */
+    autoScroll?: boolean;
 };
-declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, ...props }: Props): JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, ...props }: Props): JSX.Element;
 declare namespace VerticalTimeline {
+    var BodyText: React.FC<BaseTextProps>;
+    var SubtitleText: React.FC<BaseTextProps>;
     var ItemStatus: typeof import("../types").ItemStatus;
 }
 export default VerticalTimeline;

package/lib/components/Layout/List/VerticalTimeline/index.js

@@ -9,12 +9,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
+import React, { useRef, useCallback } from "react";
+import { ScrollView, View } from "react-native";
 import TimelineItem from "./TimelineItem";
 import Flex from "../../Flex";
+import Text from "../../../Text";
 import { ItemStatus } from "../types";
 export default function VerticalTimeline(_a) {
-    var { steps, formatEstimatedTime, setActiveIndex } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex"]);
-    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))));
+    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll"]);
+    const scrollViewRef = useRef(null);
+    const stepsContainerLayout = useRef();
+    const onStepsContainerLayout = useCallback((evt) => {
+        stepsContainerLayout.current = evt.nativeEvent.layout;
+    }, []);
+    const onActiveStepLayout = useCallback((evt) => {
+        if (!stepsContainerLayout.current || !scrollViewRef.current)
+            return;
+        const { layout } = evt.nativeEvent;
+        scrollViewRef.current.scrollTo({ x: 0, y: stepsContainerLayout.current.y + layout.y });
+    }, []);
+    return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout },
+        header,
+        React.createElement(Flex, Object.assign({}, props, { onLayout: onStepsContainerLayout, flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
+            React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));
 }
+const SubtitleText = (props) => (React.createElement(Text, Object.assign({ variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3 }, props)));
+const BodyText = (props) => (React.createElement(Text, Object.assign({ variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80" }, props)));
+VerticalTimeline.BodyText = BodyText;
+VerticalTimeline.SubtitleText = SubtitleText;
 VerticalTimeline.ItemStatus = ItemStatus;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconType } from "src/components/Icon/type";
+type Props = {
+    Icon: IconType;
+    text: string;
+    withTopDivider?: boolean;
+};
+declare const ContinueOnDevice: React.FC<Props>;
+export default ContinueOnDevice;

package/lib/components/message/ContinueOnDevice/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Divider from "../../Layout/Divider";
+import Flex from "../../Layout/Flex";
+import Text from "../../Text";
+const ContinueOnDevice = ({ Icon, text, withTopDivider = true }) => {
+    return (React.createElement(Flex, null,
+        withTopDivider ? React.createElement(Divider, { my: 6 }) : null,
+        React.createElement(Flex, { flexDirection: "row", alignItems: "center", flexShrink: 1 },
+            React.createElement(Icon, { size: 48 }),
+            React.createElement(Text, { flex: 1, pl: 4, flexWrap: "wrap", variant: "body", fontWeight: "medium", color: "neutral.c100" }, text))));
+};
+export default ContinueOnDevice;

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

@@ -1,3 +1,4 @@
 export { default as Alert } from "./Alert";
+export { default as ContinueOnDevice } from "./ContinueOnDevice";
 export { default as Notification } from "./Notification";
 export { default as Log } from "./Log";

package/lib/components/message/index.js

@@ -1,3 +1,4 @@
 export { default as Alert } from "./Alert";
+export { default as ContinueOnDevice } from "./ContinueOnDevice";
 export { default as Notification } from "./Notification";
 export { default as Log } from "./Log";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.16.0",
+  "version": "0.17.0-recover-staging.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -25,6 +25,10 @@
   },
   "exports": {
     ".": "./lib/index.js",
+    "./lib/*": "./lib/*.js",
+    "./lib/*/": "./lib/*/index.js",
+    "./*": "./lib/*.js",
+    "./*/": "./lib/*/index.js",
     "./": "./lib/",
     "./package.json": "./package.json"
   },