@ledgerhq/native-ui 0.45.0-nightly.2 → 0.46.0-nightly.0

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

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const MarketPercentIndicator: ({ percent }: {
+    percent: number;
+}) => React.JSX.Element;
+//# sourceMappingURL=MarketPercentIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketPercentIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,eAAO,MAAM,sBAAsB;aAA4B,MAAM;uBA6BpE,CAAC"}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Flex, Text } from "../../../components";
+import { useTokens } from "../../libs";
+import { useTheme } from "styled-components/native";
+const getPercentageDisplay = (percent, tokens) => {
+    if (percent > 0) {
+        return {
+            backgroundColor: String(tokens["colors-surface-status-success-default"]),
+            color: String(tokens["colors-surface-status-success-strong-default"]),
+            text: `+${percent}%`,
+        };
+    }
+    if (percent < 0) {
+        return {
+            backgroundColor: String(tokens["colors-surface-status-error-default"]),
+            color: String(tokens["colors-surface-status-error-strong-default"]),
+            text: `-${Math.abs(percent)}%`,
+        };
+    }
+    return {
+        backgroundColor: String(tokens["colors-surface-transparent-hover"]),
+        color: String(tokens["colors-content-default-default"]),
+        text: `${percent}%`,
+    };
+};
+export const MarketPercentIndicator = ({ percent }) => {
+    const { theme } = useTheme();
+    const colorType = theme;
+    const tokens = useTokens(colorType, [
+        "colors-surface-status-success-default",
+        "colors-surface-status-success-strong-default",
+        "colors-surface-status-error-default",
+        "colors-surface-status-error-strong-default",
+        "colors-surface-transparent-hover",
+        "colors-content-default-default",
+    ]);
+    const percentageDisplay = getPercentageDisplay(percent, tokens);
+    return (React.createElement(Flex, { "data-testid": "market-percent-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content", p: "4px", borderRadius: "4px", backgroundColor: percentageDisplay.backgroundColor },
+        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+};

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

@@ -0,0 +1,10 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { MarketPercentIndicator } from "./MarketPercentIndicator";
+declare const meta: Meta<typeof MarketPercentIndicator>;
+export default meta;
+type Story = StoryObj<typeof MarketPercentIndicator>;
+export declare const Positive: Story;
+export declare const Negative: Story;
+export declare const Zero: Story;
+export declare const TestMarketPercentIndicator: Story;
+//# sourceMappingURL=MarketPercentIndicator.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketPercentIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,sBAAsB,CAK7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,KAAiC,CAAC;AACzD,eAAO,MAAM,QAAQ,EAAE,KAAkC,CAAC;AAC1D,eAAO,MAAM,IAAI,EAAE,KAAgC,CAAC;AAEpD,eAAO,MAAM,0BAA0B,EAAE,KAMxC,CAAC"}

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

@@ -0,0 +1,20 @@
+import { MarketPercentIndicator } from "./MarketPercentIndicator";
+import { expect } from "@storybook/jest";
+import { within } from "@storybook/testing-library";
+const meta = {
+    component: MarketPercentIndicator,
+    title: "PreLdls/Components/MarketPercentIndicator",
+    tags: ["autodocs"],
+    args: { percent: 30 },
+};
+export default meta;
+export const Positive = { args: { percent: 30 } };
+export const Negative = { args: { percent: -30 } };
+export const Zero = { args: { percent: 0 } };
+export const TestMarketPercentIndicator = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByTestId("market-percent-indicator");
+        await expect(input).toHaveTextContent("+30%");
+    },
+};

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

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const MarketPriceIndicator: ({ percent, price }: {
+    percent: number;
+    price: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=MarketPriceIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketPriceIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,eAAO,MAAM,oBAAoB;aAAmC,MAAM;WAAS,MAAM;uBA0BxF,CAAC"}

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { useTokens } from "../../libs";
+import { useTheme } from "styled-components/native";
+import { Flex, Text } from "../../../components";
+const getPercentageDisplay = (percent, tokens) => {
+    if (percent > 0) {
+        return {
+            color: String(tokens["colors-surface-status-success-strong-default"]),
+            text: `+${percent}%`,
+        };
+    }
+    if (percent < 0) {
+        return {
+            color: String(tokens["colors-surface-status-error-strong-default"]),
+            text: `-${Math.abs(percent)}%`,
+        };
+    }
+    return {
+        color: String(tokens["colors-content-default-default"]),
+        text: `${percent}%`,
+    };
+};
+export const MarketPriceIndicator = ({ percent, price }) => {
+    const { theme } = useTheme();
+    const colorType = theme;
+    const tokens = useTokens(colorType, [
+        "colors-surface-status-success-strong-default",
+        "colors-surface-status-error-strong-default",
+        "colors-content-default-default",
+    ]);
+    const percentageDisplay = getPercentageDisplay(percent, tokens);
+    return (React.createElement(Flex, { "data-testid": "market-price-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content" },
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
+        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+};

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

@@ -0,0 +1,10 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { MarketPriceIndicator } from "./MarketPriceIndicator";
+declare const meta: Meta<typeof MarketPriceIndicator>;
+export default meta;
+type Story = StoryObj<typeof MarketPriceIndicator>;
+export declare const Positive: Story;
+export declare const Negative: Story;
+export declare const Zero: Story;
+export declare const TestMarketPriceIndicator: Story;
+//# sourceMappingURL=MarketPriceIndicator.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketPriceIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAK3C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,eAAO,MAAM,QAAQ,EAAE,KAAuD,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,KAAwD,CAAC;AAChF,eAAO,MAAM,IAAI,EAAE,KAAsD,CAAC;AAE1E,eAAO,MAAM,wBAAwB,EAAE,KAMtC,CAAC"}

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

@@ -0,0 +1,20 @@
+import { MarketPriceIndicator } from "./MarketPriceIndicator";
+import { expect } from "@storybook/jest";
+import { within } from "@storybook/testing-library";
+const meta = {
+    component: MarketPriceIndicator,
+    title: "PreLdls/Components/MarketPriceIndicator",
+    tags: ["autodocs"],
+    args: { percent: 30, price: "$100,000.00" },
+};
+export default meta;
+export const Positive = { args: { percent: 30, price: "$100,000.00" } };
+export const Negative = { args: { percent: -30, price: "$100,000.00" } };
+export const Zero = { args: { percent: 0, price: "$100,000.00" } };
+export const TestMarketPriceIndicator = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByTestId("market-price-indicator");
+        await expect(input).toHaveTextContent("$100,000.00");
+    },
+};

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

@@ -2,6 +2,8 @@ export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
 export * from "./ApyIndicator/ApyIndicator";
+export * from "./MarketPriceIndicator/MarketPriceIndicator";
+export * from "./MarketPercentIndicator/MarketPercentIndicator";
 export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";

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;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qCAAqC,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,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qCAAqC,CAAC"}

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

@@ -2,6 +2,8 @@ export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
 export * from "./ApyIndicator/ApyIndicator";
+export * from "./MarketPriceIndicator/MarketPriceIndicator";
+export * from "./MarketPercentIndicator/MarketPercentIndicator";
 export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.45.0-nightly.2",
+  "version": "0.46.0-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -41,8 +41,8 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.19.0-nightly.1",
-    "@ledgerhq/icons-ui": "^0.13.0",
-    "@ledgerhq/ui-shared": "^0.4.0-nightly.0"
+    "@ledgerhq/icons-ui": "^0.14.0-nightly.0",
+    "@ledgerhq/ui-shared": "^0.4.0"
   },
   "peerDependencies": {
     "react": ">=17",