@ledgerhq/native-ui 0.7.4 → 0.7.7

package/assets/logos/LedgerLiveAltRegular.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/assets/logos/LedgerLiveRegular.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/components/ChartCard/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const ChartCard: ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin, locale, ranges, yAxisFormatter, valueFormatter, }: {
+declare const ChartCard: ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin, xAxisFormatter, ranges, yAxisFormatter, valueFormatter, }: {
     Header?: React.ReactNode;
     Footer?: React.ReactNode;
     range: string;
@@ -8,7 +8,7 @@ declare const ChartCard: ({ Header, Footer, range, isLoading, refreshChart, char
     chartData: any;
     currencyColor: string;
     margin: number;
-    locale: string;
+    xAxisFormatter?: ((value: number) => string) | undefined;
     ranges: {
         label: string;
         value: string;

package/components/ChartCard/index.js

@@ -1,9 +1,8 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { useTheme } from "styled-components/native";
-import { Flex, GraphTabs, InfiniteLoader } from "../index";
-import * as Animatable from "react-native-animatable";
+import { Flex, GraphTabs, InfiniteLoader, Transitions } from "../index";
 import Chart from "../chart";
-const ChartCard = ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin = 0, locale, ranges, yAxisFormatter, valueFormatter, }) => {
+const ChartCard = ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin = 0, xAxisFormatter, ranges, yAxisFormatter, valueFormatter, }) => {
     const { colors } = useTheme();
     const rangesLabels = ranges.map(({ label }) => label);
     const activeRangeIndex = ranges.findIndex((r) => r.value === range);
@@ -15,24 +14,12 @@ const ChartCard = ({ Header, Footer, range, isLoading, refreshChart, chartData,
         if (range !== newRange)
             refreshChart({ range: newRange });
     }, [isLoading, range, ranges, refreshChart]);
-    const timeFormat = useMemo(() => {
-        switch (ranges[activeRangeIndex].value) {
-            case "24h":
-                return { hour: "numeric", minute: "numeric" };
-            case "7d":
-                return { weekday: "short" };
-            case "30d":
-                return { month: "short", day: "numeric" };
-            default:
-                return { month: "short" };
-        }
-    }, [ranges, activeRangeIndex]);
     return (React.createElement(Flex, { margin: margin, padding: 6, borderRadius: 2, bg: "neutral.c30" },
         Header,
-        React.createElement(Flex, { mt: 6, height: 100, alignItems: "center", justifyContent: "center" }, chartData && chartData.length > 0 ? (React.createElement(Animatable.View, { animation: "fadeIn", duration: 400, useNativeDriver: true },
-            React.createElement(Chart, { locale: locale, data: chartData, backgroundColor: colors.neutral.c30, color: currencyColor, timeFormat: timeFormat, valueKey: "value", yAxisFormatter: yAxisFormatter, valueFormatter: valueFormatter, disableTooltips: false }))) : (React.createElement(InfiniteLoader, { size: 32 }))),
+        React.createElement(Flex, { mt: 6, height: 100, alignItems: "center", justifyContent: "center" }, chartData && chartData.length > 0 ? (React.createElement(Transitions.Fade, { status: "entering", duration: 400 },
+            React.createElement(Chart, { data: chartData, backgroundColor: colors.neutral.c30, color: currencyColor, valueKey: "value", xAxisFormatter: xAxisFormatter, yAxisFormatter: yAxisFormatter, valueFormatter: valueFormatter, disableTooltips: false }))) : (React.createElement(InfiniteLoader, { size: 32 }))),
         React.createElement(Flex, { mt: 70 },
-            React.createElement(GraphTabs, { activeIndex: activeRangeIndex, activeBg: "neutral.c30", onChange: setRange, labels: rangesLabels })),
+            React.createElement(GraphTabs, { activeIndex: activeRangeIndex, activeBg: currencyColor, activeColor: "neutral.c30", onChange: setRange, labels: rangesLabels })),
         Footer));
 };
 export default ChartCard;

package/components/Form/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { BaseTextProps } from "../../Text";
 declare type CheckboxProps = {
     checked: boolean;

package/components/Form/Slider/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SliderProps } from "./index.native";
 declare const SliderScreen: (_props: SliderProps) => JSX.Element;
 export default SliderScreen;

package/components/Form/Slider/index.native.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type SliderProps = {
     step: number;
     min: number;

package/components/Form/Switch/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;

package/components/Form/Toggle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;

package/components/Icon/BoxedIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconOrElementType, IconType } from "./type";
 export declare const DEFAULT_BOX_SIZE = 40;
 export declare const DEFAULT_ICON_SIZE = 16;

package/components/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Props = {
     name: string;
     size?: number;

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/components/Loader/InfiniteLoader/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
 import { SizeProps } from "styled-system";
-declare const Loader: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+declare const Loader: import("styled-components").StyledComponent<React.ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
 export declare type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };

package/components/chart/index.d.ts

@@ -1,15 +1,15 @@
+/// <reference types="react" />
 import type { Item } from "./types";
 export declare type ChartProps = {
     data: Array<Item>;
     backgroundColor: string;
     color: string;
-    timeFormat?: any;
     valueKey?: string;
     height?: number;
+    xAxisFormatter?: (timestamp: number) => string;
     yAxisFormatter: (n: number) => string;
     valueFormatter: (n: number) => string;
     disableTooltips: boolean;
-    locale: string;
 };
-declare const Chart: ({ data, backgroundColor, color, timeFormat, valueKey, height, yAxisFormatter, valueFormatter, disableTooltips, locale, }: ChartProps) => JSX.Element;
+declare const Chart: ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey, height, xAxisFormatter, disableTooltips, }: ChartProps) => JSX.Element;
 export default Chart;

package/components/chart/index.js

@@ -11,7 +11,7 @@ const sortByDate = (a, b) => {
         return 1;
     return 0;
 };
-const Chart = ({ data, backgroundColor, color, timeFormat = { month: "short" }, valueKey = "value", height = 200, yAxisFormatter, valueFormatter, disableTooltips = false, locale, }) => {
+const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
     const theme = useTheme();
     const sortData = useMemo(() => data.sort(sortByDate), [data]);
     const labelFormatted = useCallback(({ datum }) => {
@@ -57,7 +57,7 @@ const Chart = ({ data, backgroundColor, color, timeFormat = { month: "short" },
                         stroke: color,
                     } }) }) },
             React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, tickFormat: yAxisFormatter, style: yAxisStyle }),
-            React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => new Intl.DateTimeFormat(locale, timeFormat).format(timestamp), style: xAxisStyle }),
+            React.createElement(VictoryAxis, { crossAxis: false, tickFormat: xAxisFormatter, style: xAxisStyle }),
             React.createElement(Defs, null,
                 React.createElement(LinearGradient, { id: "chartGradient", x1: "0.5", x2: "0.5", y1: "0", y2: "1" },
                     React.createElement(Stop, { stopColor: hex(color), stopOpacity: "0.15" }),

package/components/index.d.ts

@@ -11,5 +11,5 @@ export * from "./Tabs";
 export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 export * as Transitions from "./transitions";
-export * from "./chart";
-export * from "./ChartCard";
+export { default as Chart } from "./chart";
+export { default as ChartCard } from "./ChartCard";

package/components/index.js

@@ -12,5 +12,5 @@ export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 import * as Transitions_1 from "./transitions";
 export { Transitions_1 as Transitions };
-export * from "./chart";
-export * from "./ChartCard";
+export { default as Chart } from "./chart";
+export { default as ChartCard } from "./ChartCard";

package/components/message/Log/Brackets.js

@@ -16,14 +16,14 @@ export const Bracket = ({ color, style, mb, mt }) => {
             React.createElement(Path, { d: "M16.8125 0H2.8125H0.8125V2V10H2.8125V2H16.8125V0Z", fill: fill }))));
 };
 export const BracketTopLeft = ({ color }) => {
-    return React.createElement(Bracket, { color: color, mb: "-4px" });
+    return React.createElement(Bracket, { color: color });
 };
 export const BracketTopRight = ({ color }) => {
-    return React.createElement(Bracket, { color: color, mb: "-4px", style: { transform: [{ scaleX: -1 }] } });
+    return React.createElement(Bracket, { color: color, style: { transform: [{ scaleX: -1 }] } });
 };
 export const BracketBottomLeft = ({ color }) => {
-    return React.createElement(Bracket, { color: color, mt: "-4px", style: { transform: [{ scaleY: -1 }] } });
+    return React.createElement(Bracket, { color: color, style: { transform: [{ scaleY: -1 }] } });
 };
 export const BracketBottomRight = ({ color }) => {
-    return React.createElement(Bracket, { color: color, mt: "-4px", style: { transform: [{ scale: -1 }] } });
+    return React.createElement(Bracket, { color: color, style: { transform: [{ scale: -1 }] } });
 };

package/components/message/Log/index.js

@@ -2,13 +2,14 @@ import React, { memo } from "react";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
 import { BracketTopLeft, BracketTopRight, BracketBottomLeft, BracketBottomRight } from "./Brackets";
+import { Platform } from "react-native";
 function Log({ children, extraTextProps }) {
     return (React.createElement(Flex, { flexDirection: "column" },
-        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: Platform.OS === "android" ? "-2px" : "-6px" },
             React.createElement(BracketTopLeft, { color: "neutral.c100" }),
             React.createElement(BracketTopRight, { color: "neutral.c100" })),
-        React.createElement(Text, Object.assign({ variant: "h2", textTransform: "uppercase", textAlign: "center", color: "neutral.c100", px: "16px" }, extraTextProps), children),
-        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+        React.createElement(Text, Object.assign({ variant: "h2", lineHeight: "28px", textTransform: "uppercase", textAlign: "center", color: "neutral.c100", px: "15.5px", style: { overflow: "visible" } }, extraTextProps), children),
+        React.createElement(Flex, { mt: Platform.OS === "android" ? "-9.5px" : "-5px", flexDirection: "row", justifyContent: "space-between" },
             React.createElement(BracketBottomLeft, { color: "neutral.c100" }),
             React.createElement(BracketBottomRight, { color: "neutral.c100" }))));
 }

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

@@ -2,6 +2,7 @@ import React from "react";
 import { FlexBoxProps } from "../../Layout/Flex";
 export interface TagProps extends FlexBoxProps {
     active?: boolean;
+    uppercase?: boolean;
     children: React.ReactNode;
 }
-export default function Tag({ active, children, ...props }: TagProps): JSX.Element;
+export default function Tag({ active, uppercase, children, ...props }: TagProps): JSX.Element;

package/components/tags/Tag/index.js

@@ -13,7 +13,7 @@ import React from "react";
 import Flex from "../../Layout/Flex";
 import Text from "../../Text";
 export default function Tag(_a) {
-    var { active, children } = _a, props = __rest(_a, ["active", "children"]);
+    var { active, uppercase, children } = _a, props = __rest(_a, ["active", "uppercase", "children"]);
     return (React.createElement(Flex, Object.assign({ px: 2, alignItems: "center", justifyContent: "center", borderRadius: 4, borderWidth: 1, borderColor: active ? "primary.c50" : "neutral.c40" }, props),
-        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", textTransform: "uppercase", textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
+        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", uppercase: uppercase !== false, textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
 }

package/components/transitions/Fade.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionProps } from "./types";
 /**
  * A fade-in / fade-out transition changing the opacity of its children based on their status.

package/components/transitions/Slide.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionProps } from "./types";
 export interface SlideProps extends TransitionProps {
     /**

package/components/transitions/Transition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionStatus } from "./index";
 export interface Props {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.4",
+  "version": "0.7.7",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",