@ledgerhq/native-ui 0.39.0-nightly.1 → 0.39.0-nightly.2

package/lib/components/Form/TabSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyEnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0EnC"}

package/lib/components/Form/TabSelector/index.js

@@ -66,7 +66,7 @@ export default function TabSelector({ labels, initialTab, onToggle, filledVarian
             labels.map((label, index) => (React.createElement(Pressable, { hitSlop: 6, key: label.id, onPress: () => handlePress(label.id, index), style: ({ pressed }) => ({
                     opacity: pressed && selectedIndex !== index ? 0.5 : 1,
                     flex: 1,
-                }) },
+                }), testID: `tab-selector-${label.id}` },
                 React.createElement(Tab, { "$radius": tabRadius },
                     React.createElement(Text, { fontSize: 14, fontWeight: "semiBold", flexShrink: 1, numberOfLines: 1 }, label.value))))))));
 }

package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type Network = {
+    name: string;
+    id: string;
+    ticker: string;
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
+};
+type NetworkItemProps = Network & {
+    onClick: () => void;
+};
+export declare const NetworkItem: ({ name, onClick, id, ticker, leftElement, rightElement, }: NetworkItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=NetworkItem.d.ts.map

package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiCF,eAAO,MAAM,WAAW,8DAOrB,gBAAgB,sBA4BlB,CAAC"}

package/lib/pre-ldls/components/NetworkItem/NetworkItem.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import { useTokens } from "../../libs";
+import Text from "../../../components/Text";
+import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
+const Wrapper = styled(Pressable) `
+  flex-direction: row;
+  padding: ${({ tokens }) => tokens["spacing-xxs"]}px;
+  border-radius: ${({ tokens }) => tokens["radius-s"]}px;
+  align-items: center;
+  width: 100%;
+`;
+const InfoWrapper = styled(View) `
+  flex-direction: column;
+  justify-content: center;
+  margin-left: ${({ tokens }) => tokens["margin-s"]}px;
+  flex: 1;
+`;
+const LeftElementWrapper = styled(View) `
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+const TOKEN_KEYS = [
+    "spacing-xxs",
+    "margin-s",
+    "radius-s",
+    "colors-content-default-default",
+    "colors-content-subdued-default-default",
+    "colors-surface-transparent-hover",
+    "colors-surface-transparent-pressed",
+];
+export const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightElement, }) => {
+    const theme = useTheme();
+    const colorType = theme.colors.type === "dark" ? "dark" : "light";
+    const tokens = useTokens(colorType, [...TOKEN_KEYS]);
+    return (React.createElement(Wrapper, { tokens: tokens, onPress: onClick, style: ({ pressed }) => ({
+            opacity: pressed ? 0.7 : 1,
+        }) },
+        React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
+        React.createElement(InfoWrapper, { tokens: tokens },
+            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]) }, name),
+            React.createElement(LeftElementWrapper, null, leftElement)),
+        rightElement));
+};

package/lib/pre-ldls/components/NetworkItem/NetworkItem.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkItem } from "./NetworkItem";
+declare const meta: Meta<typeof NetworkItem>;
+export default meta;
+type Story = StoryObj<typeof NetworkItem>;
+export declare const Default: Story;
+export declare const TestNetworkItem: Story;
+export declare const NetworkItemWithLeftElement: Story;
+export declare const NetworkItemWithRightElement: Story;
+//# sourceMappingURL=NetworkItem.stories.d.ts.map

package/lib/pre-ldls/components/NetworkItem/NetworkItem.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,KAAU,CAAC;AAEzC,eAAO,MAAM,0BAA0B,EAAE,KAOxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAOzC,CAAC"}

package/lib/pre-ldls/components/NetworkItem/NetworkItem.stories.js

@@ -0,0 +1,32 @@
+import { NetworkItem } from "./NetworkItem";
+import { createRightElement, leftElement } from "../sharedStoryBook";
+const meta = {
+    component: NetworkItem,
+    title: "PreLdls/Components/NetworkItem",
+    tags: ["autodocs"],
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        onClick: () => console.log("NetworkItem clicked"),
+    },
+};
+export default meta;
+export const Default = {};
+export const TestNetworkItem = {};
+export const NetworkItemWithLeftElement = {
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        leftElement,
+    },
+};
+export const NetworkItemWithRightElement = {
+    args: {
+        name: "Bitcoin",
+        id: "bitcoin",
+        ticker: "btc",
+        rightElement: createRightElement(true),
+    },
+};

package/lib/pre-ldls/components/NetwrokList/NetworkList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Network } from "../NetworkItem/NetworkItem";
+export declare const NetworkList: ({ networks, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
+    networks: Network[];
+    onClick: (networkId: string) => void;
+    onVisibleItemsScrollEnd?: (() => void) | undefined;
+    scrollToTop?: boolean | undefined;
+    hasNextPage?: boolean | undefined;
+}) => React.JSX.Element;
+//# sourceMappingURL=NetworkList.d.ts.map

package/lib/pre-ldls/components/NetwrokList/NetworkList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetwrokList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAElE,eAAO,MAAM,WAAW;cAOZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;qCACJ,IAAI;;;uBAuCrC,CAAC"}

package/lib/pre-ldls/components/NetwrokList/NetworkList.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { FlashList } from "@shopify/flash-list";
+import { NetworkItem } from "../NetworkItem/NetworkItem";
+export const NetworkList = ({ networks, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
+    const flashListRef = useRef(null);
+    const renderNetworkItem = useCallback(({ item }) => React.createElement(NetworkItem, { ...item, onClick: () => onClick(item.id) }), [onClick]);
+    const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
+    useEffect(() => {
+        if (scrollToTop && flashListRef.current) {
+            flashListRef.current.scrollToOffset({ offset: 0, animated: true });
+        }
+    }, [scrollToTop]);
+    const handleEndReached = useCallback(() => {
+        if (hasNextPage && onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [hasNextPage, onVisibleItemsScrollEnd]);
+    const flashListProps = {
+        ref: flashListRef,
+        data: networks,
+        renderItem: renderNetworkItem,
+        keyExtractor,
+        estimatedItemSize: 72,
+        style: { flex: 1, width: "100%" },
+        ...(hasNextPage && {
+            onEndReached: handleEndReached,
+            onEndReachedThreshold: 0.1,
+        }),
+    };
+    return React.createElement(FlashList, { ...flashListProps });
+};

package/lib/pre-ldls/components/NetwrokList/NetwrokList.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkList } from "./NetworkList";
+declare const meta: Meta<typeof NetworkList>;
+export default meta;
+type Story = StoryObj<typeof NetworkList>;
+export declare const Default: Story;
+export declare const TestNetworkClick: Story;
+//# sourceMappingURL=NetwrokList.stories.d.ts.map

package/lib/pre-ldls/components/NetwrokList/NetwrokList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetwrokList.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetwrokList/NetwrokList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkBlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC"}

package/lib/pre-ldls/components/NetwrokList/NetwrokList.stories.js

@@ -0,0 +1,30 @@
+import { NetworkList } from "./NetworkList";
+import React from "react";
+import { View } from "react-native";
+const meta = {
+    component: NetworkList,
+    title: "PreLdls/Components/NetworkList",
+    tags: ["autodocs"],
+    args: {
+        networks: Array.from({ length: 50 }, (_, i) => ({
+            name: `Bitcoin ${i}`,
+            id: `bitcoin`,
+            ticker: "btc",
+        })),
+    },
+    decorators: [
+        (Story) => (React.createElement(View, { style: { height: 600, width: "100%" } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {};
+export const TestNetworkClick = {
+    args: {
+        networks: Array.from({ length: 3 }, (_, i) => ({
+            name: `Bitcoin ${i}`,
+            id: `bitcoin`,
+            ticker: "btc",
+        })),
+    },
+};

package/lib/pre-ldls/components/index.d.ts

@@ -1,4 +1,7 @@
 export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetwrokList/NetworkList";
+export * from "./Tag/Tag";
 //# sourceMappingURL=index.d.ts.map

package/lib/pre-ldls/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC"}

package/lib/pre-ldls/components/index.js

@@ -1,3 +1,6 @@
 export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetwrokList/NetworkList";
+export * from "./Tag/Tag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.39.0-nightly.1",
+  "version": "0.39.0-nightly.2",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.16.0-nightly.0",
-    "@ledgerhq/icons-ui": "^0.12.0",
+    "@ledgerhq/icons-ui": "^0.13.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {