@ledgerhq/native-ui 0.6.0 → 0.6.4

package/components/Text/index.d.ts

@@ -1,21 +1,19 @@
 import React from "react";
-import { TextProps } from "react-native";
-import { FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps } from "styled-system";
+import { TextProps, TextStyle } from "react-native";
+import { FontSizeProps, TextAlignProps, LineHeightProps } from "styled-system";
+import { BaseStyledProps } from "../styled";
 import { FontWeightTypes } from "./getTextStyle";
 import { TextVariants } from "../../styles/theme";
-export interface BaseTextProps extends TextProps, FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps {
+export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps, TextAlignProps, LineHeightProps {
     variant?: TextVariants;
     fontWeight?: FontWeightTypes;
     fontFamily?: string;
     fontSize?: number | string | TextVariants;
     color?: string;
-    mt?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mr?: number | string;
-    paddingTop?: number;
-    lineHeight?: number;
+    lineHeight?: number | string;
     bracket?: boolean;
+    textTransform?: TextStyle["textTransform"];
+    uppercase?: boolean;
     children: React.ReactNode;
 }
 declare const Text: ({ children, bracket, ...props }: BaseTextProps) => JSX.Element;

package/components/Text/index.js

@@ -11,12 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import { fontSize, textAlign, color, space, lineHeight, border, } from "styled-system";
+import { compose, fontSize, textAlign, lineHeight, system, } from "styled-system";
+import baseStyled from "../styled";
 import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
 import { getTextStyle } from "./getTextStyle";
-const Base = styled.Text.attrs((p) => {
+const uppercase = system({
+    uppercase: {
+        property: "textTransform",
+        transform: (value) => (value ? "uppercase" : "none"),
+    },
+});
+const textTransform = system({
+    textTransform: {
+        property: "textTransform",
+    },
+});
+const Base = baseStyled.Text.attrs((p) => {
     var _a;
     return ({
         fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
@@ -24,12 +36,7 @@ const Base = styled.Text.attrs((p) => {
     });
 }) `
   ${(p) => getTextStyle(p)}
-  ${lineHeight};
-  ${fontSize};
-  ${textAlign};
-  ${color};
-  ${space};
-  ${border};
+  ${compose(lineHeight, fontSize, textAlign, uppercase, textTransform)}
   justify-content: center;
   align-items: center;
 `;

package/components/cta/Button/index.d.ts

@@ -7,6 +7,7 @@ export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
         size: number;
         color: string;
     }> | null;
+    iconName?: string;
     type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";
     iconPosition?: "right" | "left";

package/components/cta/Button/index.js

@@ -7,19 +7,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { ActivityIndicator, TouchableOpacity, } from "react-native";
-import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+import { buttonSizeStyle, getButtonColorStyle } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import { Icon as IconComponent } from "../../Icon";
 import baseStyled from "../../styled";
 const IconContainer = styled.View `
-  ${(p) => p.iconButton
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 10px;`
-        : `margin-left: 10px;`}
+  ${(p) => p.iconButton ? "" : p.iconPosition === "left" ? `margin-right: 10px;` : `margin-left: 10px;`}
 `;
 export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
     // Avoid conflict with styled-system's size property by nulling size and renaming it
@@ -58,13 +55,14 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
+    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
+        (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
     return (React.createElement(Container, { hide: hide },
         iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null,
-        Icon ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition },
-            React.createElement(Icon, { size: ctaIconSize[size], color: text.color }))) : null,
+        IconNode && (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)),
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {

package/components/cta/Link/index.js

@@ -5,11 +5,7 @@ import Text from "../../Text";
 import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 const IconContainer = styled.View `
-  ${(p) => p.iconLink
-    ? ""
-    : p.iconPosition === "left"
-        ? `margin-right: 6px;`
-        : `margin-left: 6px;`}
+  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
 `;
 export const Base = styled(TouchableOpacity) `
   flex-direction: row;

package/components/index.d.ts

@@ -2,12 +2,12 @@ export * from "./cta";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
+export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 export * as Transitions from "./transitions";

package/components/index.js

@@ -2,13 +2,13 @@ export * from "./cta";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
-export { default as Loader } from "./Loader";
 export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
 export { default as Carousel } from "./Carousel";
 export * from "./Tabs";
+export * from "./Loader";
 export { default as ProgressBar } from "./ProgressBar";
 import * as Transitions_1 from "./transitions";
 export { Transitions_1 as Transitions };

package/components/message/Alert/index.d.ts

@@ -4,5 +4,5 @@ export interface AlertProps {
     title: string;
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon, }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -39,10 +39,10 @@ const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
   flex-direction: row;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true, }) {
+export default function Alert({ type = "info", title, showIcon = true }) {
     const theme = useTheme();
     const textColor = getColor(theme, alertColors[type || "info"].color);
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
-        React.createElement(Text, { color: textColor }, title)));
+        React.createElement(Text, { color: textColor, flexShrink: 1 }, title)));
 }

package/components/message/Notification/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
-import { TouchableOpacity, } from "react-native";
+import { TouchableOpacity } from "react-native";
 import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";

package/components/transitions/Slide.d.ts

@@ -8,4 +8,4 @@ export interface SlideProps extends TransitionProps {
 /**
  * A slide left/right transition translating its children based on their status and a given direction.
  */
-export declare function Slide({ status, duration, style, direction, children, }: SlideProps): JSX.Element;
+export declare function Slide({ status, duration, style, direction, children }: SlideProps): JSX.Element;

package/components/transitions/Slide.js

@@ -4,7 +4,7 @@ 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, }) {
+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);

package/components/transitions/Transition.js

@@ -10,8 +10,7 @@ export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit,
     const canMount = useRef(!mountOnEnter);
     canMount.current = canMount.current || inValue;
     useEffect(() => {
-        if ((inValue && status === "entered") ||
-            (!inValue && status === "exited")) {
+        if ((inValue && status === "entered") || (!inValue && status === "exited")) {
             return;
         }
         if (inValue && !enter) {
@@ -20,9 +19,7 @@ export function Transition({ in: inValue, timeout, mountOnEnter, unmountOnExit,
         if (!inValue && !exit) {
             return setStatus("exited");
         }
-        const timeoutValue = typeof timeout === "number"
-            ? timeout
-            : timeout[inValue ? "enter" : "exit"];
+        const timeoutValue = typeof timeout === "number" ? timeout : timeout[inValue ? "enter" : "exit"];
         setStatus(inValue ? "entering" : "exiting");
         const timeoutRef = setTimeout(() => {
             setStatus(inValue ? "entered" : "exited");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.0",
+  "version": "0.6.4",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,8 +15,8 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.1",
-    "@ledgerhq/ui-shared": "^0.1.4",
+    "@ledgerhq/icons-ui": "^0.2.2",
+    "@ledgerhq/ui-shared": "^0.1.5",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",

package/styles/StyleProvider.d.ts

@@ -9,5 +9,5 @@ declare module "styled-components" {
     interface DefaultTheme extends Theme {
     }
 }
-export declare const StyleProvider: ({ children, selectedPalette, }: Props) => React.ReactElement;
+export declare const StyleProvider: ({ children, selectedPalette }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.js

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
-export const StyleProvider = ({ children, selectedPalette, }) => {
+export const StyleProvider = ({ children, 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/helpers.js

@@ -5,9 +5,7 @@ export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
 const get = (object, path) => {
-    const p = typeof path === "string"
-        ? path.split(".").filter((key) => key.length)
-        : path;
+    const p = typeof path === "string" ? path.split(".").filter((key) => key.length) : path;
     return p.reduce((dive, key) => dive && dive[key], object);
 };
 export const getColor = (p, color) => {