@ledgerhq/native-ui 0.7.14 → 0.7.17-nightly.0

package/README.md

@@ -1,8 +1,7 @@
 # `@ledgerhq/native-ui`
 
-[![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/native.yml)
 [![npm](https://img.shields.io/npm/v/@ledgerhq/native-ui)](https://www.npmjs.com/package/@ledgerhq/native-ui)
-[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-native.vercel.app)
+[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://native-ui-storybook.vercel.app)
 
 ### Design and interface resources for React Native
 
@@ -10,7 +9,7 @@
 
 ## Reference
 
-**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**
+**[🔗 Storybook](https://native-ui-storybook.vercel.app)**
 
 ## Installation
 
@@ -30,8 +29,6 @@ npm i styled-components react-native-reanimated react-native-svg
 
 ### Additional setup
 
-**Skip this step if your project is managed by Expo.**
-
 Follow the installation instructions for:
 
 - [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)
@@ -86,10 +83,10 @@ import { useFonts } from "expo-font";
 */
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -107,8 +104,8 @@ Add the paths in the `react-native.config.js` file:
 ```js
 module.exports = {
   assets: [
-    "node_modules/@ledgerhq/native-ui/assets/fonts/alpha",
-    "node_modules/@ledgerhq/native-ui/assets/fonts/inter",
+    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha",
+    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter",
   ],
 };
 ```
@@ -138,10 +135,10 @@ function Logo() {
 
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -184,7 +181,7 @@ export default function App() {
 
 ```js
 import React from "react";
-import { StyleProvider } from "@ledgerhq/native-ui/styles";
+import { StyleProvider } from "@ledgerhq/native-ui";
 import { Flex, Text, Logos, Switch } from "@ledgerhq/native-ui";
 import { useTheme } from "styled-components/native";
 

package/{components → lib/components}/Form/Input/BaseInput/index.d.ts

@@ -58,7 +58,7 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
     alignItems: string;
     flexDirection: string;
     pl: string;
-}, "pl" | "alignItems" | "flexDirection">;
+}, "alignItems" | "flexDirection" | "pl">;
 export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
@@ -70,7 +70,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     alignItems: string;
     flexDirection: string;
     pr: string;
-}, "pr" | "alignItems" | "flexDirection">;
+}, "alignItems" | "flexDirection" | "pr">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**

package/{components → lib/components}/Text/getTextStyle.js

@@ -3,6 +3,7 @@ const bracketSizes = {
     h2: 28,
     h3: 20,
     h4: 18,
+    h5: 18,
     large: 20,
     body: 20,
     bodyLineHeight: 20,
@@ -37,7 +38,9 @@ export function getTextTypeStyle({ bracket }) {
         },
         h4: {
             fontFamily: "Inter",
-            textTransform: "uppercase",
+        },
+        h5: {
+            fontFamily: "Inter",
         },
         large: {
             fontFamily: "Inter",

package/{components → lib/components}/chart/index.js

@@ -11,7 +11,9 @@ const sortByDate = (a, b) => {
         return 1;
     return 0;
 };
-const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
+const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
     const theme = useTheme();
     const sortData = useMemo(() => data.sort(sortByDate), [data]);
     const labelFormatted = useCallback(({ datum }) => {
@@ -50,7 +52,11 @@ const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, v
         grid: { display: "none" },
     }), [theme]);
     return (React.createElement(Flex, { justifyContent: "center", alignItems: "center" },
-        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { y: 5 }, padding: { top: 30, left: 60, right: 35, bottom: 35 }, maxDomain: { y: domainValues.max }, minDomain: { y: domainValues.min }, containerComponent: React.createElement(VictoryVoronoiContainer, { disable: disableTooltips, voronoiBlacklist: ["victory-area"], labels: labelFormatted, labelComponent: React.createElement(VictoryTooltip, { centerOffset: { y: -10 }, renderInPortal: false, constrainToVisibleArea: true, style: {
+        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { y: 5 }, padding: { top: 30, left: 60, right: 35, bottom: 35 }, maxDomain: { y: domainValues.max }, minDomain: { y: domainValues.min }, containerComponent: React.createElement(VictoryVoronoiContainer
+            // @ts-expect-error disable this error for the sake of the monorepo
+            , { 
+                // @ts-expect-error disable this error for the sake of the monorepo
+                disable: disableTooltips, voronoiBlacklist: ["victory-area"], labels: labelFormatted, labelComponent: React.createElement(VictoryTooltip, { centerOffset: { y: -10 }, renderInPortal: false, constrainToVisibleArea: true, style: {
                         fill: color,
                     }, flyoutPadding: 7, flyoutStyle: {
                         fill: backgroundColor,

package/{components → lib/components}/message/Log/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { BaseTextProps as TextProps } from "../../Text";
 import { FlexBoxProps } from "../../Layout/Flex";
 export declare type Props = React.PropsWithChildren<FlexBoxProps & {
-    extraTextProps?: TextProps;
+    extraTextProps?: Omit<TextProps, "children">;
 }>;
 declare function Log({ children, extraTextProps }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Log>;

package/{components → lib/components}/message/Notification/index.js

@@ -6,6 +6,7 @@ import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";
 import { space } from "styled-system";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
 const NotificationContainer = styled.View `
   display: flex;
   width: 100%;
@@ -35,7 +36,9 @@ export default function Notification({ Icon, iconColor, variant = "primary", num
             !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", 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(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor, mr: 3 }, linkText),
+                        React.createElement(ExternalLinkMedium, { size: 16, color: textColor })))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
                 React.createElement(CloseMedium, { size: 14, color: textColor }))))));

package/{components → lib/components}/styled.js

@@ -6,7 +6,10 @@ const proxyStyled = new Proxy(styled, {
         return styled(target.apply(thisArg, argumentsList)(baseStyles));
     },
     get(target, property) {
-        return styled(target[property].apply(styled, [baseStyles]));
+        if (typeof target[property] === "function") {
+            return styled(target[property].apply(styled, [baseStyles]));
+        }
+        return target[property];
     },
 });
 export default proxyStyled;

package/{styles → lib/styles}/theme.d.ts

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

package/{styles → lib/styles}/theme.js

@@ -16,7 +16,8 @@ export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
 ] = fontSizes;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;
-fontSizes.h4 = fontSizes.h3;
+fontSizes.h4 = fontSizes.h2;
+fontSizes.h5 = fontSizes.h3;
 export const radii = [0, 4, 8];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
 const theme = {

package/package.json

@@ -1,29 +1,41 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.14",
-  "description": "Ledger Live - React Native UI",
+  "version": "0.7.17-nightly.0",
+  "description": "Ledger Live - Mobile UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
   "author": "Ledger Live Team <team-live@ledger.fr>",
+  "main": "lib/index.js",
+  "types": "index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/*",
+        "lib/*/index.d.ts",
+        "./*"
+      ]
+    }
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./": "./lib/",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "components",
-    "assets",
-    "styles",
-    "helpers",
-    "icons",
-    "index.d.ts",
-    "index.js"
+    "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.4",
-    "@ledgerhq/ui-shared": "^0.1.6",
-    "@types/color": "^3.0.2",
-    "@types/react": "^17.0.37",
+    "@ledgerhq/icons-ui": "^0.2.5-nightly.0",
+    "@ledgerhq/ui-shared": "^0.1.7-nightly.0",
+    "@types/color": "^3.0.3",
+    "@types/react": "^17.0.39",
     "@types/react-native": "^0.65.9",
+    "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",
     "color": "^3.1.3",
     "moment": "^2.29.1",
+    "react-native-animatable": "^1.3.3",
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "^2.1.1",
     "styled-system": "^5.1.5",
@@ -31,9 +43,109 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-native": "^0.65.0",
-    "react-native-reanimated": "^2.2.4",
+    "react-native": ">=0.64.0",
+    "react-native-reanimated": "~2.3.1",
     "react-native-svg": "^12.1.1",
     "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.4",
+    "@babel/generator": "^7.17.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/runtime": "^7.17.2",
+    "@emotion/core": "^11.0.0",
+    "@expo/webpack-config": "^0.16.18",
+    "@react-native-community/cli-server-api": "^7.0.3",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-backgrounds": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-measure": "^6.4.19",
+    "@storybook/addon-ondevice-actions": "^5.3.23",
+    "@storybook/addon-ondevice-knobs": "^5.3.25",
+    "@storybook/addon-outline": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/api": "^6.4.19",
+    "@storybook/components": "^6.4.19",
+    "@storybook/core-events": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/react-native": "^5.3.25",
+    "@storybook/theming": "^6.4.19",
+    "@svgr/core": "^5.5.0",
+    "@svgr/plugin-jsx": "^5.5.0",
+    "@svgr/plugin-svgo": "^5.5.0",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/node": "^17.0.31",
+    "@types/prop-types": "^15.7.5",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-expo": "^9.0.2",
+    "camelcase": "^6.2.1",
+    "csstype": "^3.0.11",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "expo": "~44.0.0",
+    "expo-asset": "~8.4.6",
+    "expo-cli": "^5",
+    "expo-constants": "~13.0.2",
+    "expo-file-system": "~13.1.3",
+    "expo-font": "^10.0.5",
+    "expo-modules-core": "0.6.5",
+    "expo-status-bar": "~1.2.0",
+    "fs-extra": "^10.0.1",
+    "glob": "^7.2.0",
+    "metro": "^0.67.0",
+    "metro-config": "^0.67.0",
+    "metro-extra-config": "1.0.1-nightly.0",
+    "metro-minify-uglify": "^0.67.0",
+    "metro-react-native-babel-preset": "^0.67.0",
+    "metro-runtime": "^0.67.0",
+    "metro-transform-worker": "^0.67.0",
+    "prettier": "^2.4.1",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-svg": "^12.1.1",
+    "react-native-web": "~0.17.5",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.4.4",
+    "victory": "^35.5.5",
+    "webpack": "^4.46.0"
+  },
+  "scripts": {
+    "android": "expo start --android",
+    "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
+    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
+    "build:storybook": "pnpm build-storybook -o web-build",
+    "watch": "tsc --watch",
+    "clean": "rimraf lib",
+    "eject": "expo eject",
+    "ios": "expo start --ios",
+    "lint": "eslint src storybook --ext .ts,.tsx,.js,.jsx --cache",
+    "lint:fix": "pnpm lint --fix",
+    "release": "yarn publish ./lib --access public",
+    "expo": "expo start",
+    "storybook": "start-storybook -p 6006",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "exit 0",
+    "web": "expo start --web"
   }
 }