@ledgerhq/native-ui 0.10.0-nightly.2 → 0.11.0-next.0

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Props as FlexProps } from "../../Flex";
+import { ItemStatus } from ".";
+export declare type Props = FlexProps & {
+    status: ItemStatus;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+};
+export default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props): JSX.Element;

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

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/native";
+import styled, { useTheme } from "styled-components/native";
+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 getIconBackground = (theme, status, isLastItem) => {
+    if (status === "completed") {
+        return "transparent";
+    }
+    else if (isLastItem) {
+        return theme.colors.success.c10;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c40;
+    }
+    return theme.colors.background.main;
+};
+const getIconBorder = (theme, status, isLastItem) => {
+    if (isLastItem) {
+        return theme.colors.success.c100;
+    }
+    else if (status === "inactive") {
+        return theme.colors.neutral.c50;
+    }
+    return theme.colors.primary.c80;
+};
+const CenterSegment = styled(Flex) `
+  border-radius: 9999px;
+  width: 20px;
+  height: 20px;
+  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"]);
+    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 })));
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Item } from ".";
+export declare type Props = {
+    item: Item;
+    formatEstimatedTime?: (_: number) => string;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+    setActiveIndex?: (_: number) => void;
+    index: number;
+};
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }: Props): JSX.Element;

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

@@ -0,0 +1,83 @@
+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 { Flex } from "../..";
+import { Text, Tag } from "../../..";
+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;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c20;
+    }
+    return theme.colors.neutral.c30;
+};
+const getContainerBorder = (theme, status, isLastItem) => {
+    if (isLastItem && status === "completed") {
+        return theme.colors.success.c30;
+    }
+    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.c30;
+};
+const Container = styled(Flex) `
+  flex: 1;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
+  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
+  padding: 20px 16px;
+`;
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }) {
+    /**
+     * Having an initial value of null will prevent having "height: 0" before the
+     * initial call of onLayout.
+     * The component will just layout normally without an animation which is ok
+     * since this will happen only on the first step.
+     * Without this default behavior, there are issues on iOS where sometimes the
+     * height is stuck at 0.
+     */
+    const sharedHeight = useSharedValue(null);
+    const handleLayout = useCallback(({ nativeEvent: { layout } }) => {
+        sharedHeight.value = withTiming(layout.height, { duration: 300 });
+    }, [sharedHeight]);
+    const animatedStyle = useAnimatedStyle(() => {
+        var _a;
+        return ({
+            /**
+             * If it's null the component still renders normally at its full height
+             * without its height being derived from an animated value.
+             */
+            height: (_a = sharedHeight.value) !== null && _a !== void 0 ? _a : undefined,
+        });
+    }, []);
+    const handlePress = useCallback(() => {
+        setActiveIndex && setActiveIndex(index);
+    }, [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(Flex, { flexDirection: "row", justifyContent: "space-between" },
+                    React.createElement(Text, { variant: "body", color: item.status === "inactive"
+                            ? "neutral.c80"
+                            : isLastItem
+                                ? "success.c100"
+                                : "primary.c90" }, 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`))),
+                React.createElement(Animated.ScrollView, { style: animatedStyle },
+                    React.createElement(Animated.View, { onLayout: handleLayout }, item.renderBody && item.status === "active" ? (React.createElement(Flex, { pt: 6 }, item.renderBody(true))) : null))))));
+}

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { BaseStyledProps } from "src/components/styled";
+export declare enum ItemStatus {
+    inactive = "inactive",
+    active = "active",
+    completed = "completed"
+}
+export declare type Item = {
+    status: ItemStatus;
+    title: string;
+    estimatedTime?: number;
+    renderBody?: (isDisplayed?: boolean) => ReactNode;
+};
+export declare type Props = BaseStyledProps & {
+    steps?: Item[];
+    formatEstimatedTime?: (_: number) => string;
+    setActiveIndex?: (arg0: number) => void;
+};
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, ...props }: Props): JSX.Element;
+declare namespace VerticalTimeline {
+    var ItemStatus: typeof import(".").ItemStatus;
+}
+export default VerticalTimeline;

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

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import TimelineItem from "./TimelineItem";
+import { Flex } from "../..";
+export var ItemStatus;
+(function (ItemStatus) {
+    ItemStatus["inactive"] = "inactive";
+    ItemStatus["active"] = "active";
+    ItemStatus["completed"] = "completed";
+})(ItemStatus || (ItemStatus = {}));
+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 })))));
+}
+VerticalTimeline.ItemStatus = ItemStatus;

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

@@ -2,3 +2,4 @@ export { default as List } from "./List";
 export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
+export { default as VerticalTimeline } from "./VerticalTimeline";

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

@@ -2,3 +2,4 @@ export { default as List } from "./List";
 export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
+export { default as VerticalTimeline } from "./VerticalTimeline";

package/lib/components/Tabs/Graph/index.js

@@ -4,26 +4,25 @@ import Text from "../../Text";
 import TemplateTabs from "../TemplateTabs";
 const TabBox = styled.TouchableOpacity `
   text-align: center;
-  margin: auto;
-  flex: 1;
-  border-radius: 48px;
+  border-radius: 4px;
+  box-sizing: border-box;
   overflow: hidden;
+  margin-left: 2px;
 `;
 const TabText = styled(Text).attrs((p) => ({
     // Avoid conflict with styled-system's size property by nulling size and renaming it
     size: undefined,
-    lineHeight: p.size === "medium" ? "36px" : "26px",
+    lineHeight: p.size === "medium" ? "40px" : "26px",
     textAlign: "center",
-    px: 4,
-    height: p.size === "medium" ? "36px" : "26px",
+    height: p.size === "medium" ? "40px" : "26px",
+    width: 40,
 })) ``;
 const StyledTabs = styled(TemplateTabs) `
-  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
-  border-radius: 35px;
-  padding: ${(p) => `${p.theme.space[p.size === "medium" ? 2 : 1]}px`};
+  display: flex;
+  justify-content: center;
 `;
-export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "primary.c20", size = "medium", disabled, }) => {
-    return (React.createElement(TabBox, { onPress: onPress, disabled: disabled }, isActive ? (React.createElement(TabText, { variant: "small", size: size, bg: activeBg, color: disabled ? "neutral.c70" : activeColor, fontWeight: "semiBold" }, label)) : (React.createElement(TabText, { variant: "small", size: size, color: disabled ? "neutral.c70" : "neutral.c90" }, label))));
+export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "neutral.c30", size = "medium", disabled, }) => {
+    return (React.createElement(TabBox, { onPress: onPress, disabled: disabled }, isActive ? (React.createElement(TabText, { variant: "small", size: size, bg: activeBg, color: disabled ? "neutral.c70" : activeColor, fontWeight: "semiBold", uppercase: true }, label)) : (React.createElement(TabText, { variant: "small", size: size, color: disabled ? "neutral.c70" : "neutral.c90", uppercase: true }, label))));
 };
 const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
 export default GraphTabs;

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

@@ -2,11 +2,9 @@
 import React from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { BaseStyledProps } from "../../styled";
+import { IconType } from "../../Icon/type";
 export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
-    Icon?: React.ComponentType<{
-        size: number;
-        color: string;
-    }> | null;
+    Icon?: IconType;
     iconName?: string;
     type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { IconType } from "src/components/Icon/type";
+import { BaseStyledProps } from "../../../styled";
+export declare type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
+    Icon: IconType;
+    disabled?: boolean;
+    onPressWhenDisabled?: TouchableOpacityProps["onPress"];
+};
+export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, TouchableOpacityProps & {
+    visuallyDisabled?: boolean | undefined;
+}, never>;
+declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
+export default QuickActionButton;

package/lib/components/cta/QuickAction/QuickActionButton/index.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import Text from "../../../Text";
+import baseStyled from "../../../styled";
+export const Base = baseStyled(TouchableOpacity) `
+  height: 80px;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  padding: 0 ${(p) => p.theme.space[6]}px;
+  ${({ visuallyDisabled, theme }) => visuallyDisabled
+    ? `border: 1px solid ${theme.colors.neutral.c30};`
+    : `background-color: ${theme.colors.neutral.c20};`}
+`;
+const QuickActionButton = (_a) => {
+    var { Icon, children, disabled, onPress, onPressWhenDisabled } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled"]);
+    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled }, otherProps),
+        React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
+};
+export default QuickActionButton;

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FlatListProps } from "react-native";
+import { QuickActionButtonProps } from "../QuickActionButton";
+export declare type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem">;
+declare const QuickActionList: ({ numColumns, data, ...otherProps }: QuickActionListProps) => React.ReactElement;
+export default QuickActionList;

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback } from "react";
+import { FlatList } from "react-native";
+import QuickActionButton from "../QuickActionButton";
+const QuickActionList = (_a) => {
+    var { numColumns = 3, data } = _a, otherProps = __rest(_a, ["numColumns", "data"]);
+    const renderItem = useCallback(({ item, index }) => {
+        return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0 })));
+    }, []);
+    return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, horizontal: false, renderItem: renderItem, numColumns: numColumns, style: { width: "100%" } })));
+};
+export default QuickActionList;

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

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

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

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

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

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button";
 export { default as Link } from "./Link";
+export * from "./QuickAction";

package/lib/components/cta/index.js

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button";
 export { default as Link } from "./Link";
+export * from "./QuickAction";

package/lib/components/tags/Tag/index.d.ts

@@ -7,5 +7,7 @@ export interface TagProps extends FlexBoxProps {
     Icon?: IconType;
     uppercase?: boolean;
     children?: React.ReactNode;
+    numberOfLines?: number;
+    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
 }
-export default function Tag({ type, size, uppercase, Icon, children, ...props }: TagProps): JSX.Element;
+export default function Tag({ type, size, uppercase, Icon, children, numberOfLines, ellipsizeMode, ...props }: TagProps): JSX.Element;

package/lib/components/tags/Tag/index.js

@@ -19,9 +19,9 @@ const typeColor = {
     warning: "warning.c100",
 };
 export default function Tag(_a) {
-    var { type = "shade", size = "small", uppercase, Icon, children } = _a, props = __rest(_a, ["type", "size", "uppercase", "Icon", "children"]);
+    var { type = "shade", size = "small", uppercase, Icon, children, numberOfLines, ellipsizeMode } = _a, props = __rest(_a, ["type", "size", "uppercase", "Icon", "children", "numberOfLines", "ellipsizeMode"]);
     return (React.createElement(Flex, Object.assign({ px: size === "small" ? "6px" : 3, alignItems: "center", justifyContent: "center", flexDirection: "row", borderRadius: 6, bg: typeColor[type], height: size === "small" ? "18px" : "28px" }, props),
         Icon && (React.createElement(Box, { pr: 2 },
             React.createElement(Icon, { size: size === "small" ? 16 : 20, color: type === "shade" ? "neutral.c90" : "neutral.c00" }))),
-        React.createElement(Text, { variant: size === "small" ? "subtitle" : "small", fontWeight: "bold", uppercase: uppercase !== false, textAlign: "center", color: type === "shade" ? "neutral.c90" : "neutral.c00" }, children)));
+        React.createElement(Text, { variant: size === "small" ? "subtitle" : "small", fontWeight: "bold", uppercase: uppercase !== false, textAlign: "center", color: type === "shade" ? "neutral.c90" : "neutral.c00", numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode }, children)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.10.0-nightly.2",
+  "version": "0.11.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",