@ledgerhq/native-ui 0.9.0-nightly.2 → 0.9.1-nightly.0

package/lib/components/Navigation/StoriesIndicator/index.js

@@ -4,9 +4,9 @@ import Animated, { useAnimatedStyle, withTiming, useSharedValue, Easing, } from
 import { Flex } from "../../Layout";
 const ProgressBar = styled.View `
   background-color: ${(p) => p.theme.colors.primary.c100};
+  border-radius: ${(p) => p.theme.radii[2]}px;
   height: 100%;
   width: 100%;
-  border-radius: ${(p) => p.theme.radii[2]}px;
 `;
 const AnimatedProgressBar = Animated.createAnimatedComponent(ProgressBar);
 function ActiveProgressBar({ duration }) {

package/lib/components/Text/getTextStyle.js

@@ -7,6 +7,7 @@ const bracketSizes = {
     h4: 18,
     h5: 18,
     large: 20,
+    largeLineHeight: 20,
     body: 20,
     bodyLineHeight: 20,
     paragraph: 20,
@@ -52,6 +53,10 @@ export function getTextTypeStyle({ bracket }) {
         large: {
             fontFamily: "Inter",
         },
+        largeLineHeight: {
+            fontFamily: "Inter",
+            lineHeight: "27.2px",
+        },
         body: {
             fontFamily: "Inter",
         },

package/lib/components/message/Notification/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TextProps, TouchableOpacityProps } from "react-native";
-declare type NotificationVariant = "primary" | "secondary" | "success" | "warning" | "error" | string;
+declare type NotificationVariant = "primary" | "secondary" | "success" | "warning" | "error" | "plain" | string;
 declare type Props = {
     Icon?: React.ComponentType<{
         size: number;

package/lib/components/message/Notification/index.js

@@ -39,16 +39,27 @@ const variantProps = {
         color: "neutral.c100",
         padding: 0,
     },
+    plain: {
+        bg: "neutral.c100",
+        color: "neutral.c00",
+        padding: 6,
+        iconMarginRight: "10px",
+        closeIconSize: 20,
+        closeIconColor: "neutral.c70",
+        textVariant: "bodyLineHeight",
+        textFontWeight: "semiBold",
+        borderRadius: 8,
+    },
 };
 const NotificationContainer = styled(FlexBox).attrs((p) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ({
         width: "100%",
         flexDirection: "row",
         alignItems: "center",
         bg: (_b = (_a = variantProps[p.variant]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : variantProps.primary.bg,
         p: (_c = variantProps[p.variant]) === null || _c === void 0 ? void 0 : _c.padding,
-        borderRadius: 1,
+        borderRadius: (_e = (_d = variantProps[p.variant]) === null || _d === void 0 ? void 0 : _d.borderRadius) !== null && _e !== void 0 ? _e : 1,
     });
 }) ``;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
@@ -58,22 +69,27 @@ const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
   ${space};
 `;
 export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colors } = useTheme();
     const textColor = (_b = (_a = variantProps[variant]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : variantProps.primary.color;
     const linkColor = ((_c = variantProps[variant]) === null || _c === void 0 ? void 0 : _c.linkColor) || textColor;
+    const iconMarginRight = (_e = (_d = variantProps[variant]) === null || _d === void 0 ? void 0 : _d.iconMarginRight) !== null && _e !== void 0 ? _e : 16;
+    const closeIconSize = (_g = (_f = variantProps[variant]) === null || _f === void 0 ? void 0 : _f.closeIconSize) !== null && _g !== void 0 ? _g : 14;
+    const closeIconColor = (_j = (_h = variantProps[variant]) === null || _h === void 0 ? void 0 : _h.closeIconColor) !== null && _j !== void 0 ? _j : textColor;
+    const textVariant = (_l = (_k = variantProps[variant]) === null || _k === void 0 ? void 0 : _k.textVariant) !== null && _l !== void 0 ? _l : "body";
+    const textFontWeight = (_o = (_m = variantProps[variant]) === null || _m === void 0 ? void 0 : _m.textFontWeight) !== null && _o !== void 0 ? _o : "medium";
     return (React.createElement(NotificationContainer, { variant: variant },
-        Icon && (React.createElement(FlexBox, { mr: 16 },
+        Icon && (React.createElement(FlexBox, { mr: iconMarginRight },
             React.createElement(Icon, { size: 20, color: iconColor || textColor }))),
         React.createElement(FlexBox, { flexShrink: 1 },
             React.createElement(Text, { variant: "body", fontWeight: "medium", color: textColor, numberOfLines: numberOfLines }, title),
-            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
+            !!subtitle && (React.createElement(Text, { variant: textVariant, fontWeight: textFontWeight, color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
             linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
                 React.createElement(TouchableOpacity, { onPress: onLinkPress },
                     React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: linkColor, mr: 3 }, linkText),
+                        React.createElement(Text, { variant: textVariant, fontWeight: "semiBold", color: linkColor, mr: 3 }, linkText),
                         React.createElement(ExternalLinkMedium, { size: 16, color: linkColor })))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-                React.createElement(CloseMedium, { size: 14, color: textColor }))))));
+                React.createElement(CloseMedium, { size: closeIconSize, color: closeIconColor }))))));
 }

package/lib/components/transitions/Fade.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
 import { TransitionProps } from "./types";
+export interface FadeProps extends TransitionProps {
+    /**
+     * Delay before starting the transition.
+     */
+    delay?: number;
+}
 /**
  * A fade-in / fade-out transition changing the opacity of its children based on their status.
  */
-export declare function Fade({ status, duration, style, children }: TransitionProps): JSX.Element;
+export declare function Fade({ status, delay, duration, style, children }: FadeProps): JSX.Element;

package/lib/components/transitions/Fade.js

@@ -1,29 +1,44 @@
-import React, { useRef, useMemo, useEffect } from "react";
+import React, { useRef, useMemo, useEffect, useState } from "react";
 import { Animated } from "react-native";
 /**
  * A fade-in / fade-out transition changing the opacity of its children based on their status.
  */
-export function Fade({ status, duration, style, children }) {
-    const fadeAnim = useRef(new Animated.Value(status === "entered" ? 1 : 0)).current;
+export function Fade({ status, delay = 0, duration, style, children }) {
+    const [visible, setVisible] = useState(status === "exiting");
+    const fadeAnim = useRef(new Animated.Value(["entered", "exiting"].includes(status) ? 1 : 0)).current;
     const fadeIn = useMemo(() => Animated.timing(fadeAnim, {
         toValue: 1,
+        delay,
         duration,
         useNativeDriver: true,
-    }), [duration, fadeAnim]);
+    }), [duration, delay, fadeAnim]);
     const fadeOut = useMemo(() => Animated.timing(fadeAnim, {
         toValue: 0,
+        delay,
         duration,
         useNativeDriver: true,
-    }), [duration, fadeAnim]);
+    }), [duration, delay, fadeAnim]);
     useEffect(() => {
+        let dead = false;
         if (status === "entering") {
-            fadeIn.start();
+            fadeIn.start(() => {
+                if (dead)
+                    return;
+                setVisible(true);
+            });
         }
         if (status === "exiting") {
-            fadeOut.start();
+            fadeOut.start(() => {
+                if (dead)
+                    return;
+                setVisible(false);
+            });
         }
-    }, [fadeIn, fadeOut, status]);
-    return (React.createElement(Animated.View, { style: [
+        return () => {
+            dead = true;
+        };
+    }, [fadeIn, fadeOut, status, setVisible]);
+    return (React.createElement(Animated.View, { pointerEvents: visible ? "auto" : "none", style: [
             {
                 opacity: fadeAnim,
             },

package/lib/styles/theme.d.ts

@@ -1,9 +1,9 @@
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny"];
+export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "largeLineHeight", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny"];
 export declare type TextVariants = typeof textVariants[number];
 export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
-export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny">;
+export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny">;
 export declare const radii: number[];
 export declare const zIndexes: number[];
 export declare type Theme = {

package/lib/styles/theme.js

@@ -9,6 +9,7 @@ export const textVariants = [
     "h4",
     "h5",
     "large",
+    "largeLineHeight",
     "body",
     "bodyLineHeight",
     "paragraph",
@@ -33,6 +34,7 @@ export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28, 32];
 ] = fontSizes;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.largeLineHeight = fontSizes.large;
 fontSizes.h4 = fontSizes.h2;
 fontSizes.h5 = fontSizes.h3;
 export const radii = [0, 4, 8];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.9.0-nightly.2",
+  "version": "0.9.1-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/crypto-icons-ui": "^0.2.0-nightly.0",
+    "@ledgerhq/crypto-icons-ui": "^0.2.0",
     "@ledgerhq/icons-ui": "^0.2.7",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@types/color": "^3.0.3",
@@ -136,7 +136,11 @@
     "styled-components": "^5.3.3",
     "typescript": "^4.4.4",
     "victory": "^35.5.5",
-    "webpack": "^4.46.0"
+    "webpack": "^4.46.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0"
   },
   "scripts": {
     "android": "expo start --android",
@@ -149,6 +153,7 @@
     "ios": "expo start --ios",
     "lint": "eslint src storybook --ext .ts,.tsx,.js,.jsx --cache",
     "lint:fix": "pnpm lint --fix",
+    "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}'",
     "release": "yarn publish ./lib --access public",
     "expo": "expo start",
     "storybook": "start-storybook -p 6006",