@ledgerhq/native-ui 0.10.0-nightly.1 → 0.10.0

package/lib/components/Icon/CryptoIcon.d.ts

@@ -4,7 +4,11 @@ export declare type Props = {
     size?: number;
     color?: string;
     backgroundColor?: string;
+    circleIcon?: boolean;
+    disabled?: boolean;
+    tokenIcon?: string;
+    fallbackIcon?: JSX.Element;
 };
 export declare const iconNames: string[];
-declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+declare const CryptoIcon: ({ name, size, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }: Props) => JSX.Element;
 export default CryptoIcon;

package/lib/components/Icon/CryptoIcon.js

@@ -1,23 +1,77 @@
 import * as icons from "@ledgerhq/crypto-icons-ui/native";
 import React from "react";
 import { ensureContrast } from "../../styles";
-import { useTheme } from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
+import Text from "../Text/index";
+import Flex from "../Layout/Flex";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
     const key = rawKey;
     if (!set.has(key))
         set.add(key);
     return set;
 }, new Set()));
-const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
-    const maybeIconName = `${name}`;
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+})) ``;
+const Circle = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    borderRadius: "50%",
+    backgroundColor: p.backgroundColor,
+})) ``;
+const TokenContainer = styled(Flex).attrs((p) => ({
+    position: "absolute",
+    bottom: "-2px",
+    right: "-5px",
+    alignItems: "center",
+    justifyContent: "center",
+    heigth: p.size,
+    width: p.size,
+    borderRadius: "50%",
+    border: `2px solid ${p.borderColor}`,
+    backgroundColor: p.backgroundColor,
+    zIndex: 0,
+})) ``;
+function Fallback({ name }) {
+    return (React.createElement(Text, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1)));
+}
+const IconBox = ({ children, color, backgroundColor, disabled, size = 16, tokenIcon = "", }) => {
+    const { colors } = useTheme();
+    if (tokenIcon in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[tokenIcon];
+        const defaultColor = Component.DefaultColor;
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(Container, { size: size },
+            children,
+            tokenIcon && (React.createElement(TokenContainer, { size: size / 3, borderColor: colors.background.main, backgroundColor: contrastedColor },
+                React.createElement(Component, { size: size, color: colors.background.main })))));
+    }
+    return children;
+};
+const CryptoIcon = ({ name, size = 16, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }) => {
     const { colors } = useTheme();
+    const maybeIconName = `${name}`;
     if (maybeIconName in icons) {
         // @ts-expect-error FIXME I don't know how to make you happy ts
         const Component = icons[maybeIconName];
         const defaultColor = Component.DefaultColor;
-        const contrastedColor = ensureContrast(color || defaultColor, backgroundColor || colors.background.main);
-        return React.createElement(Component, { size: size, color: contrastedColor });
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(IconBox, { size: size, tokenIcon: tokenIcon, color: color, disabled: disabled, name: name }, tokenIcon || circleIcon ? (React.createElement(Circle, { backgroundColor: contrastedColor, size: size },
+            React.createElement(Component, { size: size, color: colors.background.main }))) : (React.createElement(Component, { size: size, color: contrastedColor }))));
+    }
+    if (fallbackIcon) {
+        return fallbackIcon;
     }
-    return null;
+    return React.createElement(Fallback, { name: name });
 };
 export default CryptoIcon;

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.1",
+  "version": "0.10.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",