@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

package/dist/module/lib/Components/DotCount/DotCount.stories.js

@@ -0,0 +1,172 @@
+"use strict";
+
+import { useState } from 'react';
+import { Avatar } from "../Avatar/Avatar.js";
+import { MediaImage } from "../MediaImage/MediaImage.js";
+import { SegmentedControl, SegmentedControlButton } from "../SegmentedControl/SegmentedControl.js";
+import { Box } from "../Utility/Box/index.js";
+import { DotCount } from "./DotCount.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: DotCount,
+  title: 'Communication/DotCount',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['lg', 'md']
+    },
+    appearance: {
+      control: 'radio',
+      options: ['base', 'red']
+    },
+    value: {
+      control: 'number'
+    },
+    max: {
+      control: 'number'
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    value: 3,
+    size: 'lg',
+    appearance: 'base'
+  }
+};
+export const SizeShowcase = {
+  args: {
+    value: 5
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's12'
+    },
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      value: 5,
+      size: "lg"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      value: 5,
+      size: "md"
+    })]
+  })
+};
+export const AppearanceShowcase = {
+  args: {
+    value: 3
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's12'
+    },
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      value: 3,
+      size: "lg",
+      appearance: "base"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      value: 3,
+      size: "lg",
+      appearance: "red"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      value: 3,
+      size: "lg",
+      disabled: true
+    })]
+  })
+};
+export const OverflowShowcase = {
+  args: {
+    value: 100
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's12'
+    },
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      value: 100,
+      size: "lg"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      value: 100,
+      max: 50,
+      size: "lg"
+    }), /*#__PURE__*/_jsx(DotCount, {
+      value: 0,
+      size: "lg"
+    })]
+  })
+};
+export const WithChildren = {
+  args: {
+    value: 5
+  },
+  render: () => {
+    const [fitState, setFitState] = useState('preview');
+    return /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        gap: 's24'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 's12'
+        },
+        children: [/*#__PURE__*/_jsx(DotCount, {
+          value: 5,
+          size: "md",
+          children: /*#__PURE__*/_jsx(MediaImage, {
+            src: "https://crypto-icons.ledger.com/BTC.png",
+            alt: "Bitcoin",
+            size: 40,
+            shape: "circle"
+          })
+        }), /*#__PURE__*/_jsx(DotCount, {
+          value: 100,
+          size: "md",
+          children: /*#__PURE__*/_jsx(Avatar, {
+            src: "https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop",
+            size: "md"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(SegmentedControl, {
+        selectedValue: fitState,
+        onSelectedChange: setFitState,
+        tabLayout: "fit",
+        accessibilityLabel: "Fit layout",
+        children: [/*#__PURE__*/_jsxs(SegmentedControlButton, {
+          value: "preview",
+          children: ["Preview", /*#__PURE__*/_jsx(DotCount, {
+            value: 3,
+            size: "md",
+            style: {
+              marginLeft: 6
+            }
+          })]
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "raw",
+          children: "Raw"
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "blame",
+          children: "Blame"
+        })]
+      })]
+    });
+  }
+};
+//# sourceMappingURL=DotCount.stories.js.map

package/dist/module/lib/Components/DotCount/DotCount.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Avatar","MediaImage","SegmentedControl","SegmentedControlButton","Box","DotCount","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","argTypes","size","control","options","appearance","value","max","Base","args","SizeShowcase","render","lx","flexDirection","alignItems","gap","children","AppearanceShowcase","disabled","OverflowShowcase","WithChildren","fitState","setFitState","src","alt","shape","selectedValue","onSelectedChange","tabLayout","accessibilityLabel","style","marginLeft"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/DotCount.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/DotCount/DotCount.test.js

@@ -0,0 +1,174 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { createRef } from 'react';
+import { Text } from 'react-native';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { DotCount } from "./DotCount.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('DotCount', () => {
+  it('should render the value', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5,
+        size: "lg"
+      })
+    }));
+    expect(getByText('5')).toBeTruthy();
+  });
+  it('should hide text when value is 0', () => {
+    const {
+      queryByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 0,
+        size: "lg"
+      })
+    }));
+    expect(queryByText('0')).toBeNull();
+  });
+  it('should cap value at max and show overflow indicator', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 100,
+        max: 50,
+        size: "lg"
+      })
+    }));
+    expect(getByText('50+')).toBeTruthy();
+  });
+  it('should default max to 99', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 150,
+        size: "lg"
+      })
+    }));
+    expect(getByText('99+')).toBeTruthy();
+  });
+  it('should clamp max to 1 when given zero or negative', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5,
+        max: 0,
+        size: "lg"
+      })
+    }));
+    expect(getByText('1+')).toBeTruthy();
+  });
+  it('should render children alongside the count', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 3,
+        size: "md",
+        children: /*#__PURE__*/_jsx(Text, {
+          children: "Child"
+        })
+      })
+    }));
+    expect(getByText('3')).toBeTruthy();
+    expect(getByText('Child')).toBeTruthy();
+  });
+  it('should forward testID to the outer wrapper', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        testID: "dot-count",
+        value: 3,
+        size: "lg"
+      })
+    }));
+    expect(getByTestId('dot-count')).toBeTruthy();
+  });
+  it('should forward pointerEvents to the outer wrapper', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        testID: "dot-count",
+        value: 3,
+        size: "lg",
+        pointerEvents: "none"
+      })
+    }));
+    expect(getByTestId('dot-count').props.pointerEvents).toBe('none');
+  });
+  it('should forward ref to the outer wrapper', () => {
+    const ref = /*#__PURE__*/createRef();
+    render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        ref: ref,
+        value: 3,
+        size: "lg"
+      })
+    }));
+    expect(ref.current).toBeTruthy();
+  });
+  it('should render with red appearance', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5,
+        size: "lg",
+        appearance: "red"
+      })
+    }));
+    expect(getByText('5')).toBeTruthy();
+  });
+  it('should render with disabled state', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5,
+        size: "lg",
+        disabled: true
+      })
+    }));
+    expect(getByText('5')).toBeTruthy();
+  });
+  it('should render in md size', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5,
+        size: "md"
+      })
+    }));
+    expect(getByText('5')).toBeTruthy();
+  });
+  it('should default size to md when omitted', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(DotCount, {
+        value: 5
+      })
+    }));
+    expect(getByText('5')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=DotCount.test.js.map

package/dist/module/lib/Components/DotCount/DotCount.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","createRef","Text","ThemeProvider","DotCount","jsx","_jsx","TestWrapper","children","themes","colorScheme","locale","getByText","value","size","toBeTruthy","queryByText","toBeNull","max","getByTestId","testID","pointerEvents","props","toBe","ref","current","appearance","disabled"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/DotCount.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/DotCount/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./DotCount.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/DotCount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/index.ts"],"mappings":";;AAAA,cAAc,eAAY;AAC1B,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/DotCount/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/DotCount/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/DotIcon/DotIcon.js

@@ -0,0 +1,134 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from "../../../styles/index.js";
+import { Box } from "../Utility/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const dotIconSizeMap = {
+  16: 12,
+  20: 12,
+  24: 16
+};
+const dotSquareRadiusMap = {
+  16: 5,
+  20: 6,
+  24: 8
+};
+export const mediaImageDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  64: 24
+};
+export const spotDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  72: 24
+};
+const pinAxisMap = {
+  'top-start': ['top', 'left'],
+  'top-end': ['top', 'right'],
+  'bottom-start': ['bottom', 'left'],
+  'bottom-end': ['bottom', 'right']
+};
+const DOT_OFFSET = -3;
+const getPinOffset = pin => {
+  const [v, h] = pinAxisMap[pin];
+  return {
+    [v]: DOT_OFFSET,
+    [h]: DOT_OFFSET
+  };
+};
+const appearanceBgMap = {
+  success: 'successStrong',
+  muted: 'mutedStrong',
+  error: 'errorStrong'
+};
+const useStyles = ({
+  size,
+  shape,
+  pin,
+  appearance
+}) => {
+  return useStyleSheet(t => {
+    const sizeValue = t.sizes[`s${size}`];
+    const radius = shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
+    const pinOffset = getPinOffset(pin);
+    return {
+      dot: {
+        position: 'absolute',
+        zIndex: 10,
+        width: sizeValue,
+        height: sizeValue,
+        borderRadius: radius,
+        borderWidth: 1,
+        backgroundColor: t.colors.bg[appearanceBgMap[appearance]],
+        borderColor: t.colors.border.baseInverted,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...pinOffset
+      },
+      icon: {
+        color: t.colors.text.onInteractive
+      }
+    };
+  }, [size, shape, pin, appearance]);
+};
+
+/**
+ * A wrapper component that positions a small icon indicator at a configurable
+ * corner of a child element like MediaImage or Spot. The dot background uses a
+ * semantic color (`success`, `muted`, or `error`).
+ *
+ * @example
+ * import { DotIcon } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <DotIcon appearance="success" icon={ArrowDown} pin="bottom-end">
+ *   <MediaImage src="https://example.com/usdc.png" alt="USDC" size={48} />
+ * </DotIcon>
+ */
+export const DotIcon = ({
+  children,
+  icon: Icon,
+  appearance,
+  pin = 'bottom-end',
+  size = 20,
+  shape = 'circle',
+  lx = {},
+  style,
+  ref,
+  ...rest
+}) => {
+  const styles = useStyles({
+    size,
+    shape,
+    pin,
+    appearance
+  });
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    lx: lx,
+    style: StyleSheet.flatten([{
+      position: 'relative'
+    }, style]),
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Box, {
+      style: {
+        alignSelf: 'flex-start',
+        position: 'relative'
+      },
+      children: [children, /*#__PURE__*/_jsx(Box, {
+        testID: "dot-icon-dot",
+        style: styles.dot,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: dotIconSizeMap[size],
+          style: styles.icon
+        })
+      })]
+    })
+  });
+};
+DotIcon.displayName = 'DotIcon';
+//# sourceMappingURL=DotIcon.js.map

package/dist/module/lib/Components/DotIcon/DotIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","dotIconSizeMap","dotSquareRadiusMap","mediaImageDotIconSizeMap","spotDotIconSizeMap","pinAxisMap","DOT_OFFSET","getPinOffset","pin","v","h","appearanceBgMap","success","muted","error","useStyles","size","shape","appearance","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","dot","position","zIndex","width","height","borderWidth","backgroundColor","colors","bg","borderColor","border","baseInverted","overflow","alignItems","justifyContent","icon","color","text","onInteractive","DotIcon","children","Icon","lx","style","ref","rest","styles","flatten","alignSelf","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/DotIcon/DotIcon.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIconStories from './DotIcon.stories';
+
+<Meta title='Communication/DotIcon' of={DotIconStories} />
+
+# DotIcon
+
+## Introduction
+
+DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
+
+## Anatomy
+
+<Canvas of={DotIconStories.Base} />
+
+- **Wrapper**: Relative container that preserves the child's layout
+- **Child**: The primary element (e.g. MediaImage, Spot)
+- **Dot**: Absolutely-positioned indicator with a semantic background and an icon inside
+
+## Properties
+
+### Overview
+
+<Canvas of={DotIconStories.Base} />
+<Controls of={DotIconStories.Base} />
+
+### Pin
+
+Four corner placements are available: `bottom-end` (default), `top-end`, `bottom-start`, and `top-start`.
+
+<Canvas of={DotIconStories.PinShowcase} />
+
+### Shapes
+
+<Canvas of={DotIconStories.ShapeShowcase} />
+
+- **circle** (default): Fully rounded dot
+- **square**: Rounded corners that scale with size
+
+### Appearances
+
+The `appearance` prop controls the semantic background color of the dot: `success`, `muted`, or `error`.
+
+<Canvas of={DotIconStories.AppearanceShowcase} />
+
+### Sizes
+
+The dot size is driven by the parent MediaImage or Spot size via the mapping helpers `mediaImageDotIconSizeMap` and `spotDotIconSizeMap`. Allowed sizes are `16`, `20`, and `24`. The icon size is handled internally by the component.
+
+<Canvas of={DotIconStories.SizeShowcase} />
+
+## Accessibility
+
+- The icon is purely decorative; the child element should carry its own accessibility label.
+- Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.