@ledgerhq/native-ui 0.7.4-monorepo.3 → 0.7.5

package/components/chart/index.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useCallback } from "react";
+import { useTheme } from "styled-components/native";
+import { Defs, LinearGradient, Stop } from "react-native-svg";
+import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryTooltip, VictoryVoronoiContainer, } from "victory-native";
+import { Flex } from "../index";
+import { hex } from "../../styles/helpers";
+const sortByDate = (a, b) => {
+    if (a.date.getTime() < b.date.getTime())
+        return -1;
+    if (a.date.getTime() > b.date.getTime())
+        return 1;
+    return 0;
+};
+const Chart = ({ data, backgroundColor, color, timeFormat = { month: "short" }, valueKey = "value", height = 200, yAxisFormatter, valueFormatter, disableTooltips = false, locale, }) => {
+    const theme = useTheme();
+    const sortData = useMemo(() => data.sort(sortByDate), [data]);
+    const labelFormatted = useCallback(({ datum }) => {
+        const valueFormatted = valueFormatter(datum[valueKey]);
+        return valueFormatted === "-" ? "0" : valueFormatted;
+    }, [valueKey, valueFormatter]);
+    const domainValues = useMemo(() => {
+        const counterValues = data.map((d) => d[valueKey]);
+        return {
+            min: Math.min(...counterValues) * 0.8,
+            max: Math.max(...counterValues) * 1.2, // 1.2 So the maximum value of the yAxis is a bit bigger than the max value displayed
+        };
+    }, [data, valueKey]);
+    const yAxisStyle = useMemo(() => ({
+        grid: {
+            stroke: theme.colors.neutral.c40,
+            strokeDasharray: "4 4",
+        },
+        axisLabel: { display: "none" },
+        axis: { display: "none" },
+        ticks: { display: "none" },
+        tickLabels: {
+            fill: theme.colors.neutral.c80,
+            fontSize: 12,
+        },
+    }), [theme]);
+    const xAxisStyle = useMemo(() => ({
+        axis: {
+            stroke: theme.colors.neutral.c40,
+            strokeDasharray: "4 4",
+        },
+        tickLabels: {
+            fill: theme.colors.neutral.c80,
+            fontSize: 12,
+        },
+        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: {
+                        fill: color,
+                    }, flyoutPadding: 7, flyoutStyle: {
+                        fill: backgroundColor,
+                        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(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" }),
+                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
+            React.createElement(VictoryArea, { name: "victory-area", data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
+            React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }))));
+};
+export default Chart;

package/components/chart/types.d.ts

@@ -0,0 +1,6 @@
+export declare type Item = {
+    date: Date;
+    value?: number;
+} & {
+    [key: string]: number;
+};

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

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

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

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

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

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

package/{lib/components → components}/transitions/Fade.d.ts

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

package/{lib/components → components}/transitions/Slide.d.ts

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

package/{lib/components → components}/transitions/Transition.d.ts

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

package/package.json

@@ -1,33 +1,24 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.4-monorepo.3",
-  "description": "Ledger Live - Mobile UI",
+  "version": "0.7.5",
+  "description": "Ledger Live - Desktop 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": [
-    "lib/**/*"
+    "components",
+    "assets",
+    "styles",
+    "helpers",
+    "icons",
+    "index.d.ts",
+    "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.4-monorepo.3",
-    "@ledgerhq/ui-shared": "^0.1.6-monorepo.3",
-    "@types/color": "^3.0.3",
-    "@types/react": "^17.0.39",
+    "@ledgerhq/icons-ui": "^0.2.3",
+    "@ledgerhq/ui-shared": "^0.1.5",
+    "@types/color": "^3.0.2",
+    "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",
     "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",
@@ -40,105 +31,9 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-native": ">=0.64.0",
-    "react-native-reanimated": "^2.4.1",
+    "react-native": "^0.65.0",
+    "react-native-reanimated": "^2.2.4",
     "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/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",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "^9.0.2",
-    "camelcase": "^6.2.1",
-    "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-monorepo.3",
-    "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",
-    "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.4.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",
-    "build:storybook": "build-storybook -o web-build",
-    "build:icons": "node -e \"process.env['VERCEL_BUILD'] ? process.exit(1) : process.exit(0)\" || (cd ../icons && npm run build)",
-    "build:web": "npm run build:icons && npm run build:storybook",
-    "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": "eslint src storybook --ext .ts,.tsx,.js,.jsx --fix --cache",
-    "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"
-  },
-  "readme": "# `@ledgerhq/native-ui`\n\n[![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/native.yml)\n[![npm](https://img.shields.io/npm/v/@ledgerhq/native-ui)](https://www.npmjs.com/package/@ledgerhq/native-ui)\n[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-native.vercel.app)\n\n### Design and interface resources for React Native\n\n#### This package contains [React Native](https://reactnative.dev/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).\n\n## Reference\n\n**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**\n\n## Installation\n\n### Package\n\n```sh\nnpm i @ledgerhq/native-ui\n```\n\n### Peer dependencies\n\n_This library uses the following packages under the hood and relies on them being installed separately to avoid package duplication._\n\n```sh\nnpm i styled-components react-native-reanimated react-native-svg\n```\n\n### Additional setup\n\n**Skip this step if your project is managed by Expo.**\n\nFollow the installation instructions for:\n\n- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)\n- [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)\n\n## Usage\n\n### Provider\n\nBefore using the library components, the style provider must be imported and rendered once to provide the components with the right context.\n\n```tsx\nimport { StyleProvider } from \"@ledgerhq/native-ui\";\n\nfunction Root({ children }) {\n  // Selected theme palette can be either \"dark\" or \"light\".\n  return <StyleProvider selectedPalette=\"light\">{children}</StyleProvider>;\n}\n```\n\n### Components\n\nImport the components from `@ledgerhq/native-ui`.\n\n```tsx\nimport { Flex, Text } from \"@ledgerhq/native-ui\";\n\nfunction Hello() {\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\">\n      <Text variant=\"h1\" color=\"neutral.c100\">\n        Hello, world!\n      </Text>\n    </Flex>\n  );\n}\n```\n\n### Fonts\n\n#### Using [Expo](https://expo.dev/)\n\n```sh\nexpo install expo-font\n```\n\n```js\nimport { useFonts } from \"expo-font\";\n\n/*\n  A higher-order component that will load and provide Ledger fonts to your app.\n*/\nfunction FontProvider({ children }) {\n  const [fontsLoaded] = useFonts({\n    \"HMAlphaMono-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf\"),\n    \"Inter-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf\"),\n    \"Inter-SemiBold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf\"),\n    \"Inter-Bold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf\"),\n  });\n\n  if (!fontsLoaded) {\n    return null;\n  }\n\n  return children;\n}\n```\n\n#### React Native - Bare\n\nAdd the paths in the `react-native.config.js` file:\n\n```js\nmodule.exports = {\n  assets: [\n    \"node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha\",\n    \"node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter\",\n  ],\n};\n```\n\nThen run the following command to add the required native code:\n\n```\nnpx react-native link\n```\n\n## Minimal Working Example\n\n[🌍 Hosted here.](https://snack.expo.dev/PG3RFRIAP)\n\n### Expo\n\n```js\nimport React from \"react\";\nimport { StyleProvider, Flex, Switch, Text, Logos } from \"@ledgerhq/native-ui\";\nimport { useTheme } from \"styled-components/native\";\nimport { useFonts } from \"expo-font\";\n\nfunction Logo() {\n  const theme = useTheme();\n  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;\n}\n\nfunction FontProvider({ children }) {\n  const [fontsLoaded] = useFonts({\n    \"HMAlphaMono-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf\"),\n    \"Inter-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf\"),\n    \"Inter-SemiBold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf\"),\n    \"Inter-Bold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf\"),\n  });\n\n  if (!fontsLoaded) {\n    return null;\n  }\n\n  return children;\n}\n\nexport default function App() {\n  const [palette, setPalette] = React.useState(\"light\");\n  const isLight = palette === \"light\";\n\n  return (\n    <FontProvider>\n      <StyleProvider selectedPalette={palette}>\n        <Flex\n          flex={1}\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexDirection=\"column\"\n          backgroundColor=\"neutral.c00\"\n        >\n          <Logo />\n          <Text variant=\"h2\" color=\"neutral.c100\" my={10}>\n            Hello, world!\n          </Text>\n          <Switch\n            checked={isLight}\n            onChange={() => setPalette(() => (isLight ? \"dark\" : \"light\"))}\n          />\n        </Flex>\n      </StyleProvider>\n    </FontProvider>\n  );\n}\n```\n\n### React Native - Bare\n\n```js\nimport React from \"react\";\nimport { StyleProvider } from \"@ledgerhq/native-ui/styles\";\nimport { Flex, Text, Logos, Switch } from \"@ledgerhq/native-ui\";\nimport { useTheme } from \"styled-components/native\";\n\nfunction Logo() {\n  const theme = useTheme();\n  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;\n}\n\nexport default function App() {\n  const [palette, setPalette] = React.useState(\"light\");\n  const isLight = palette === \"light\";\n\n  return (\n    <StyleProvider selectedPalette={palette}>\n      <Flex\n        flex={1}\n        p={12}\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        flexDirection=\"column\"\n        backgroundColor=\"neutral.c00\"\n      >\n        <Logo />\n        <Text variant=\"h2\" color=\"neutral.c100\" my={10}>\n          Hello, world!\n        </Text>\n        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? \"dark\" : \"light\"))} />\n      </Flex>\n    </StyleProvider>\n  );\n}\n```\n"
+  }
 }

package/lib/components/chart/index.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { Item } from "./types";
-export declare type ChartProps = {
-    data: Array<Item>;
-    color: string;
-    tickFormat?: string;
-    valueKey?: string;
-    height?: number;
-};
-declare const Chart: ({ data, color, tickFormat, valueKey, height, }: ChartProps) => JSX.Element;
-export default Chart;

package/lib/components/chart/index.js

@@ -1,59 +0,0 @@
-import React, { useMemo } from "react";
-import styled, { useTheme } from "styled-components/native";
-import moment from "moment";
-import { Defs, LinearGradient, Stop } from "react-native-svg";
-import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryScatter, } from "victory-native";
-import { hex } from "../../styles/helpers";
-import Flex from "../Layout/Flex";
-const Container = styled(Flex) `
-  background-color: ${(p) => p.theme.colors.background.main};
-`;
-const sortByDate = (a, b) => {
-    if (a.date.getTime() < b.date.getTime())
-        return -1;
-    if (a.date.getTime() > b.date.getTime())
-        return 1;
-    return 0;
-};
-const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 191, }) => {
-    const theme = useTheme();
-    const sortData = useMemo(() => data.sort(sortByDate), [data]);
-    return (React.createElement(Container, null,
-        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { x: [0, 5], y: [30, 10] } },
-            React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, style: {
-                    grid: {
-                        stroke: theme.colors.neutral.c40,
-                        strokeDasharray: "4 4",
-                    },
-                    axisLabel: { display: "none" },
-                    axis: { display: "none" },
-                    ticks: { display: "none" },
-                    tickLabels: { display: "none" },
-                } }),
-            React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => moment(timestamp).format(tickFormat), style: {
-                    axis: {
-                        stroke: theme.colors.neutral.c40,
-                        strokeDasharray: "4 4",
-                    },
-                    tickLabels: {
-                        fill: theme.colors.neutral.c80,
-                        fontSize: 12,
-                        lineHeight: "14.52px",
-                    },
-                    grid: { display: "none" },
-                } }),
-            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.11" }),
-                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
-            React.createElement(VictoryArea, { data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
-            React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }),
-            React.createElement(VictoryScatter, { style: {
-                    data: {
-                        stroke: color,
-                        strokeWidth: 3,
-                        fill: theme.colors.background.main,
-                    },
-                }, size: 5, data: [sortData[sortData.length - 1]], x: "date", y: valueKey }))));
-};
-export default Chart;

package/lib/components/chart/types.d.ts

@@ -1,6 +0,0 @@
-export declare type Item = {
-    date: Date;
-    value?: number | string;
-} & {
-    [key: string]: number | string;
-};