@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

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

@@ -0,0 +1,137 @@
+"use strict";
+
+import { useState } from 'react';
+import { BasketPutIn, HomeFill, Settings, Placeholder, Chart1, Bell, CoinPercent, Home, LifeRing, LifeRingFill, Cart, CreditCard, CreditCardFill } from "../../Symbols/index.js";
+import { TabBar, TabBarItem } from "./TabBar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Navigation/TabBar',
+  component: TabBar,
+  subcomponents: {
+    TabBarItem
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light'
+    }
+  },
+  argTypes: {
+    active: {
+      control: 'text',
+      description: 'The currently active tab value',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onTabPress: {
+      action: 'tab pressed',
+      description: 'Callback function when a tab is pressed',
+      table: {
+        type: {
+          summary: '(active: string) => void'
+        }
+      }
+    },
+    children: {
+      control: false,
+      description: 'TabBarItem children',
+      table: {
+        type: {
+          summary: 'TabBarChildren'
+        }
+      }
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {},
+  render: () => {
+    const [active, setActive] = useState('home');
+    return /*#__PURE__*/_jsxs(TabBar, {
+      active: active,
+      onTabPress: setActive,
+      lx: {
+        width: 's320'
+      },
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "home",
+        label: "Home",
+        icon: Home,
+        activeIcon: HomeFill
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "pay",
+        label: "Pay",
+        icon: CreditCard,
+        activeIcon: CreditCardFill
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "help",
+        label: "Help",
+        icon: LifeRing,
+        activeIcon: LifeRingFill
+      })]
+    });
+  }
+};
+export const Complex = {
+  args: {},
+  render: () => {
+    const [active, setActive] = useState('portfolio');
+    return /*#__PURE__*/_jsxs(TabBar, {
+      active: active,
+      onTabPress: setActive,
+      lx: {
+        width: 's320'
+      },
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "market",
+        label: "Market",
+        icon: Chart1
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "portfolio",
+        label: "Portfolio",
+        icon: CoinPercent,
+        activeIcon: CoinPercent
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "shop",
+        label: "Shop",
+        icon: BasketPutIn
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "notifications",
+        label: "Alerts",
+        icon: Bell
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "settings",
+        label: "Settings",
+        icon: Settings
+      })]
+    });
+  }
+};
+export const MissingLabel = {
+  args: {},
+  render: () => {
+    const [active, setActive] = useState('tab1');
+    return /*#__PURE__*/_jsxs(TabBar, {
+      active: active,
+      onTabPress: setActive,
+      lx: {
+        width: 's320'
+      },
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "tab1"
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "tab2",
+        label: "Tab",
+        icon: Placeholder
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "tab3",
+        icon: Cart
+      })]
+    });
+  }
+};
+//# sourceMappingURL=TabBar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useState","BasketPutIn","HomeFill","Settings","Placeholder","Chart1","Bell","CoinPercent","Home","LifeRing","LifeRingFill","Cart","CreditCard","CreditCardFill","TabBar","TabBarItem","jsx","_jsx","jsxs","_jsxs","meta","title","component","subcomponents","parameters","layout","backgrounds","default","argTypes","active","control","description","table","type","summary","onTabPress","action","children","Base","args","render","setActive","lx","width","value","label","icon","activeIcon","Complex","MissingLabel"],"sourceRoot":"../../../../../src","sources":["lib/Components/TabBar/TabBar.stories.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { HomeFill, Settings, BasketPutIn } from "../../Symbols/index.js";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { TabBar, TabBarItem } from "./TabBar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const renderWithProvider = component => {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    themes: ledgerLiveThemes,
+    colorScheme: "dark",
+    locale: "en",
+    children: component
+  }));
+};
+describe('TabBar', () => {
+  it('should render tab items with labels', () => {
+    const onTabPress = jest.fn();
+    const {
+      getByText
+    } = renderWithProvider(/*#__PURE__*/_jsxs(TabBar, {
+      active: "home",
+      onTabPress: onTabPress,
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "home",
+        label: "Home",
+        icon: HomeFill
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "settings",
+        label: "Settings",
+        icon: Settings
+      })]
+    }));
+    expect(getByText('Home')).toBeTruthy();
+    expect(getByText('Settings')).toBeTruthy();
+  });
+  it('should call onTabPress when tab is pressed', () => {
+    const onTabPress = jest.fn();
+    const {
+      getByText
+    } = renderWithProvider(/*#__PURE__*/_jsxs(TabBar, {
+      active: "home",
+      onTabPress: onTabPress,
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "home",
+        label: "Home",
+        icon: HomeFill
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "settings",
+        label: "Settings",
+        icon: Settings
+      })]
+    }));
+    fireEvent.press(getByText('Settings'));
+    expect(onTabPress).toHaveBeenCalledWith('settings');
+  });
+  it('should render multiple tabs correctly', () => {
+    const onTabPress = jest.fn();
+    const {
+      getByText
+    } = renderWithProvider(/*#__PURE__*/_jsxs(TabBar, {
+      active: "home",
+      onTabPress: onTabPress,
+      children: [/*#__PURE__*/_jsx(TabBarItem, {
+        value: "home",
+        label: "Home",
+        icon: HomeFill
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "shop",
+        label: "Shop",
+        icon: BasketPutIn
+      }), /*#__PURE__*/_jsx(TabBarItem, {
+        value: "settings",
+        label: "Settings",
+        icon: Settings
+      })]
+    }));
+    expect(getByText('Home')).toBeTruthy();
+    expect(getByText('Shop')).toBeTruthy();
+    expect(getByText('Settings')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=TabBar.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","fireEvent","React","HomeFill","Settings","BasketPutIn","ThemeProvider","TabBar","TabBarItem","jsx","_jsx","jsxs","_jsxs","renderWithProvider","component","themes","colorScheme","locale","children","onTabPress","fn","getByText","active","value","label","icon","toBeTruthy","press","toHaveBeenCalledWith"],"sourceRoot":"../../../../../src","sources":["lib/Components/TabBar/TabBar.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/TabBar/TabBarContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+const [TabBarContextProvider, _useTabBarSafeContext] = createSafeContext('TabBar');
+export const useTabBarContext = () => _useTabBarSafeContext({
+  consumerName: 'TabBarItem',
+  contextRequired: true
+});
+export { TabBarContextProvider };
+//# sourceMappingURL=TabBarContext.js.map

package/dist/module/lib/Components/TabBar/TabBarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createSafeContext","TabBarContextProvider","_useTabBarSafeContext","useTabBarContext","consumerName","contextRequired"],"sourceRoot":"../../../../../src","sources":["lib/Components/TabBar/TabBarContext.tsx"],"mappings":";;AAAA,SAASA,iBAAiB,QAAQ,8BAA8B;AAOhE,MAAM,CAACC,qBAAqB,EAAEC,qBAAqB,CAAC,GAClDF,iBAAiB,CAAqB,QAAQ,CAAC;AAEjD,OAAO,MAAMG,gBAAgB,GAAGA,CAAA,KAC9BD,qBAAqB,CAAC;EACpBE,YAAY,EAAE,YAAY;EAC1BC,eAAe,EAAE;AACnB,CAAC,CAAC;AAEJ,SAASJ,qBAAqB","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from "./TabBar.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["TabBar","TabBarItem","TAB_BAR_HEIGHT"],"sourceRoot":"../../../../../src","sources":["lib/Components/TabBar/index.ts"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,aAAU","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,133 @@
+"use strict";
+
+import { StyleSheet, Text } 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 useStyles = ({
+  appearance,
+  size,
+  disabled
+}) => {
+  return useStyleSheet(t => {
+    const bgColors = {
+      base: t.colors.bg.mutedTransparent,
+      gray: t.colors.bg.mutedTransparent,
+      accent: t.colors.bg.accent,
+      success: t.colors.bg.success,
+      error: t.colors.bg.error,
+      warning: t.colors.bg.warning
+    };
+    const textColors = {
+      base: t.colors.text.base,
+      gray: t.colors.text.muted,
+      accent: t.colors.text.onAccent,
+      success: t.colors.text.success,
+      error: t.colors.text.error,
+      warning: t.colors.text.warning
+    };
+    const sizeStyles = {
+      md: {
+        height: t.sizes.s24,
+        paddingHorizontal: t.spacings.s8,
+        paddingVertical: t.spacings.s4
+      },
+      sm: {
+        height: t.sizes.s20,
+        paddingHorizontal: t.spacings.s4,
+        paddingVertical: t.spacings.s2
+      }
+    };
+    const textTypography = size === 'md' ? t.typographies.body3 : t.typographies.body4;
+    return {
+      root: StyleSheet.flatten([{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: t.spacings.s4,
+        borderRadius: t.borderRadius.xs,
+        backgroundColor: bgColors[appearance],
+        ...sizeStyles[size]
+      }, disabled && {
+        backgroundColor: t.colors.bg.disabled
+      }]),
+      text: StyleSheet.flatten([textTypography, {
+        color: textColors[appearance]
+      }, disabled && {
+        color: t.colors.text.disabled
+      }]),
+      icon: StyleSheet.flatten([{
+        flexShrink: 0,
+        color: textColors[appearance]
+      }, disabled && {
+        color: t.colors.text.disabled
+      }])
+    };
+  }, [appearance, size, disabled]);
+};
+const iconSizeMap = {
+  md: 16,
+  sm: 12
+};
+
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
+export const Tag = ({
+  appearance = 'accent',
+  size = 'md',
+  icon,
+  label,
+  disabled = false,
+  lx = {},
+  style,
+  ref,
+  ...props
+}) => {
+  const styles = useStyles({
+    appearance,
+    size,
+    disabled
+  });
+  const IconComponent = icon;
+  const iconSize = iconSizeMap[size];
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    lx: lx,
+    style: StyleSheet.flatten([styles.root, style]),
+    ...props,
+    children: [IconComponent && /*#__PURE__*/_jsx(IconComponent, {
+      size: iconSize,
+      style: styles.icon
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.text,
+      children: label
+    })]
+  });
+};
+Tag.displayName = 'Tag';
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","Text","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","useStyles","appearance","size","disabled","t","bgColors","base","colors","bg","mutedTransparent","gray","accent","success","error","warning","textColors","text","muted","onAccent","sizeStyles","md","height","sizes","s24","paddingHorizontal","spacings","s8","paddingVertical","s4","sm","s20","s2","textTypography","typographies","body3","body4","root","flatten","flexDirection","alignItems","justifyContent","gap","borderRadius","xs","backgroundColor","color","icon","flexShrink","iconSizeMap","Tag","label","lx","style","ref","props","styles","IconComponent","iconSize","children","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tag/Tag.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,172 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TagStories from './Tag.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
+
+<Meta title='Components/Tag' of={TagStories} />
+
+# 🏷️ Tag
+
+<CustomTabs>
+  <Tab label="Overview">
+
+View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=722-5547&m=dev)
+
+## Anatomy
+
+- **Label:** The text content of the tag.
+- **Icon (optional):** An optional icon displayed before the label.
+
+## Properties
+
+### Overview
+
+<Canvas of={TagStories.Base} />
+<Controls of={TagStories.Base} />
+
+### Appearance
+
+<Canvas of={TagStories.AppearanceShowcase} />
+
+---
+
+### Size
+
+Tags come in two different sizes:
+
+- **md** (default)
+- **sm**
+
+<Canvas of={TagStories.SizeShowcase} />
+
+### Icon
+
+Tags can be displayed with or without an icon.
+
+<Canvas of={TagStories.ContentTypeShowcase} />
+
+### Accessibility
+
+To be implemented:
+
+- **Color contrast**
+- **Text zoom**
+- **Touch targets**
+- **Screen reader support**
+- **Semantic labeling**
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { Tag } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Tag size="md" appearance="accent" label="My Tag" />;
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout adjustments:
+
+```tsx
+<Tag
+  size="md"
+  appearance="accent"
+  label="Custom Tag"
+  lx={{ marginTop: 's4' }}
+/>
+```
+
+### With Icons
+
+The Tag component supports icons with automatic size adjustment based on the tag size:
+
+```tsx
+import { Tag } from '@ledgerhq/lumen-ui-rnative';
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return <Tag size="md" appearance="success" icon={Check} label="Success" />;
+}
+```
+
+
+## Do's and Don'ts
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use standard size variants'
+      description='Use the size prop with predefined variants (sm, md)'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tag size="sm" icon={Check} label="Success" />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use custom sizes"
+      description='Avoid using style prop to override standard sizes'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tag style={{ height: 52 }} icon={Check} label="Success" />
+```
+
+    </DontBlockItem>
+</DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Provide proper accessibility props'
+      description='Use accessible and accessibilityRole props for screen reader support'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Tag
+  label="Important"
+  accessible={true}
+  accessibilityRole="text"
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't omit accessibility props"
+      description='Avoid creating tags without accessibility support for screen readers'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Tag
+  label="Important"
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>