@ledgerhq/native-ui 0.2.0 → 0.6.0

package/components/transitions/Slide.js

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { Animated, Platform, Dimensions } from "react-native";
+const WEB = Platform.OS === "web";
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export function Slide({ status, duration, style, direction = "left", children, }) {
+    const [width, setWidth] = useState(Dimensions.get("window").width);
+    const styleRef = useRef(new Animated.Value(0)).current;
+    const previousStatus = useRef(null);
+    useEffect(() => () => {
+        previousStatus.current = status;
+    }, [status]);
+    const animateIn = useMemo(() => Animated.timing(styleRef, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, styleRef]);
+    const animateOut = useMemo(() => Animated.timing(styleRef, {
+        toValue: direction === "left" ? -1 : 1,
+        duration,
+        useNativeDriver: true,
+    }), [direction, duration, styleRef]);
+    useEffect(() => {
+        if (status === "entering") {
+            if (previousStatus.current !== "exiting") {
+                styleRef.setValue(direction === "left" ? 1 : -1);
+            }
+            animateIn.start();
+        }
+        if (status === "exiting") {
+            animateOut.start();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                transform: [
+                    {
+                        translateX: styleRef.interpolate({
+                            inputRange: [-1, 1],
+                            outputRange: WEB ? ["-100%", "100%"] : [-width, width],
+                        }),
+                    },
+                ],
+            },
+            style,
+        ], onLayout: ({ nativeEvent }) => setWidth(nativeEvent.layout.width) }, children));
+}

package/components/transitions/Transition.d.ts

@@ -0,0 +1,49 @@
+import { TransitionStatus } from "./index";
+export interface Props {
+    /**
+     * Show the component. Triggers the enter or exit states.
+     */
+    in: boolean;
+    /**
+     * By default the child component is mounted immediately along with the parent Transition component.
+     * If you want to "lazy mount" the component on the first in={true} you can set mountOnEnter.
+     * After the first enter transition the component will stay mounted, even on "exited",
+     * unless you also specify unmountOnExit.
+     */
+    mountOnEnter?: boolean;
+    /**
+     * By default the child component stays mounted after it reaches the 'exited' state.
+     * Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Enable or disable enter transitions.
+     */
+    enter?: boolean;
+    /**
+     * Enable or disable exit transitions.
+     */
+    exit?: boolean;
+    /**
+     * The duration of the transition, in milliseconds.
+     *
+     * You may specify a single timeout for all transitions using a string or or individually using an object.
+     */
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * A function child can be used instead of a React element.
+     * This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'),
+     * which can be used to apply context specific props to a component.
+     */
+    children: (status: TransitionStatus) => JSX.Element | null;
+}
+/**
+ * Mimics the [Transition](https://reactcommunity.org/react-transition-group/transition) component
+ * from [react-transition-group](https://reactcommunity.org/react-transition-group).
+ *
+ * Supports a minimal set of options but works with react-native.
+ */
+export declare function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit, enter, exit, children, }: Props): JSX.Element | null;

package/components/transitions/Transition.js

@@ -0,0 +1,42 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+/**
+ * Mimics the [Transition](https://reactcommunity.org/react-transition-group/transition) component
+ * from [react-transition-group](https://reactcommunity.org/react-transition-group).
+ *
+ * Supports a minimal set of options but works with react-native.
+ */
+export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit, enter = true, exit = true, children, }) {
+    const [status, setStatus] = useState(inValue ? "entered" : "exited");
+    const canMount = useRef(!mountOnEnter);
+    canMount.current = canMount.current || inValue;
+    useEffect(() => {
+        if ((inValue && status === "entered") ||
+            (!inValue && status === "exited")) {
+            return;
+        }
+        if (inValue && !enter) {
+            return setStatus("entered");
+        }
+        if (!inValue && !exit) {
+            return setStatus("exited");
+        }
+        const timeoutValue = typeof timeout === "number"
+            ? timeout
+            : timeout[inValue ? "enter" : "exit"];
+        setStatus(inValue ? "entering" : "exiting");
+        const timeoutRef = setTimeout(() => {
+            setStatus(inValue ? "entered" : "exited");
+        }, timeoutValue);
+        return () => {
+            clearTimeout(timeoutRef);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inValue, timeout]);
+    const result = useMemo(() => {
+        if (!canMount.current || (unmountOnExit && status === "exited")) {
+            return null;
+        }
+        return children(status);
+    }, [children, status, unmountOnExit]);
+    return result;
+}

package/components/transitions/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Fade";
+export * from "./Slide";
+export * from "./types";
+export * from "./Transition";

package/components/transitions/index.js

@@ -0,0 +1,4 @@
+export * from "./Fade";
+export * from "./Slide";
+export * from "./types";
+export * from "./Transition";

package/components/transitions/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+export declare type TransitionStatus = "entering" | "entered" | "exiting" | "exited";
+export interface TransitionProps {
+    /**
+     * The status of the transition, either "entered", "entering", "exiting" or "exited".
+     */
+    status: TransitionStatus;
+    /**
+     * Duration used to transition between statuses.
+     */
+    duration: number;
+    /**
+     * Additional styles to pass to the underlying View wrapper.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Children that will get controlled by the transition.
+     */
+    children: React.ReactNode;
+}

package/components/transitions/types.js

@@ -0,0 +1 @@
+export {};

package/icons/Close.js

@@ -4,5 +4,5 @@ import { useTheme } from "styled-components/native";
 export default function Close({ size = 16, color }) {
     const { colors } = useTheme();
     return (React.createElement(Svg, { viewBox: "0 0 16 16", width: size, height: size },
-        React.createElement(Path, { fill: color || colors.palette.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
+        React.createElement(Path, { fill: color || colors.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.2.0",
+  "version": "0.6.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,27 +15,25 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.0",
-    "@ledgerhq/ui-shared": "^0.1.3",
+    "@ledgerhq/icons-ui": "^0.2.1",
+    "@ledgerhq/ui-shared": "^0.1.4",
     "@types/color": "^3.0.2",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",
-    "@types/styled-components-react-native": "^5.1.1",
+    "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",
     "color": "^3.1.3",
     "moment": "^2.29.1",
     "react-native-modal": "^12.0.3",
-    "react-native-reanimated": "~2.2.3",
-    "react-native-svg": "12.1.1",
     "rn-range-slider": "^2.1.1",
-    "styled-components": "^5.3.3",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-native": "^0.64.0",
-    "react-native-reanimated": "~2.2.3",
-    "react-native-svg": "12.1.1"
+    "react-native-reanimated": "^2.2.4",
+    "react-native-svg": "^12.1.1",
+    "styled-components": "^5.3.3"
   }
 }

package/styles/InvertTheme.d.ts

@@ -3,7 +3,6 @@ import { ThemeNames } from "@ledgerhq/ui-shared";
 interface Props {
     children: React.ReactNode;
     selectedPalette?: ThemeNames;
-    fontsPath?: string;
 }
 export declare const InvertTheme: ({ children }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.js

@@ -3,6 +3,6 @@ import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
 export const StyleProvider = ({ children, selectedPalette, }) => {
-    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
+    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
     return React.createElement(ThemeProvider, { theme: theme }, children);
 };

package/styles/theme.d.ts

@@ -14,7 +14,10 @@ export declare type Theme = {
     radii: number[];
     fontSizes: number[];
     space: number[];
-    colors: {
+    colors: ColorPalette & {
+        /**
+         * @deprecated Do not use the .palette prefix anymore!
+         */
         palette: ColorPalette;
     };
     zIndexes: number[];

package/styles/theme.js

@@ -1,5 +1,7 @@
 import { palettes } from "@ledgerhq/ui-shared";
+//                    0  1  2  3  4   5   6   7   8   9   10  11  12  13  14
 export const space = [0, 2, 4, 8, 12, 14, 16, 24, 32, 40, 48, 64, 80, 96, 120];
+//                        0   1   2   3   4   5   6   7   8
 export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
 [
     fontSizes.tiny,
@@ -26,9 +28,7 @@ const theme = {
     radii,
     fontSizes,
     space,
-    colors: {
-        palette: palettes.light,
-    },
+    colors: Object.assign(Object.assign({}, palettes.light), { palette: palettes.light }),
     zIndexes,
 };
 export default theme;

package/components/Navigation/ToggleGroup/index.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { TouchableOpacity } from "react-native";
-export declare type ToggleGroupProps = {
-    labels: string[];
-    activeIndex: number;
-    onChange: (newIndex: number) => void;
-};
-export declare const ToggleGroupContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../Layout/Flex").Props & {
-    flexDirection: string;
-    alignItems: string;
-}, "alignItems" | "flexDirection">;
-export declare const ToggleBox: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-declare const ToggleGroup: (props: ToggleGroupProps) => React.ReactElement;
-export default ToggleGroup;

package/components/Navigation/ToggleGroup/index.js

@@ -1,25 +0,0 @@
-import React from "react";
-import styled from "styled-components/native";
-import Text from "../../Text";
-import { TouchableOpacity } from "react-native";
-import Button from "../../cta/Button";
-import FlexBox from "../../Layout/Flex";
-export const ToggleGroupContainer = styled(FlexBox).attrs({
-    flexDirection: "row",
-    alignItems: "stretch",
-}) `
-  width: 100%;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
-  border-radius: 35px;
-  padding: 4px;
-`;
-export const ToggleBox = styled(TouchableOpacity) `
-  text-align: center;
-  margin: auto;
-  flex: 1;
-`;
-const ToggleGroup = (props) => {
-    const { labels, activeIndex, onChange } = props;
-    return (React.createElement(ToggleGroupContainer, null, labels.map((label, key) => (React.createElement(ToggleBox, { key: key, onPress: () => onChange(key) }, key === activeIndex ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36 }, label)))))));
-};
-export default ToggleGroup;

package/components/drawer/Notification/index.js

@@ -1,37 +0,0 @@
-import React from "react";
-import styled, { useTheme } from "styled-components/native";
-import FlexBox from "../../Layout/Flex";
-import { TouchableOpacity, } from "react-native";
-import Text from "../../Text";
-import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
-const NotificationContainer = styled.View `
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px;
-  background-color: ${(p) => p.variant === "primary"
-    ? p.theme.colors.palette.primary.c90
-    : "transparent"};
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-`;
-export default function Notification({ Icon, color, variant = "primary", numberOfLines, title, subtitle, onClose, onLearnMore, }) {
-    const { colors } = useTheme();
-    const textColor = variant === "primary"
-        ? colors.palette.neutral.c00
-        : colors.palette.neutral.c100;
-    return (React.createElement(NotificationContainer, { variant: variant },
-        React.createElement(FlexBox, null,
-            React.createElement(Icon, { size: 18, color: color || textColor })),
-        React.createElement(FlexBox, { ml: 16, flexShrink: 1 },
-            React.createElement(Text, { variant: "body", fontWeight: "medium", color: color || textColor, numberOfLines: numberOfLines }, title),
-            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: color ||
-                    (variant === "primary"
-                        ? colors.palette.neutral.c00
-                        : colors.palette.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
-            onLearnMore && (React.createElement(TouchableOpacity, { onPress: onLearnMore },
-                React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: color || textColor }, "Learn more")))),
-        onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
-            React.createElement(TouchableOpacity, { onPress: onClose },
-                React.createElement(CloseMedium, { size: 14, color: color || textColor }))))));
-}

package/components/drawer/index.d.ts

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

package/components/drawer/index.js

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