@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

package/src/styles/types/styled.types.ts

@@ -1,10 +1,5 @@
-import type {
-  ViewStyle,
-  FlexStyle,
-  TextStyle,
-  ViewProps,
-  TextProps,
-} from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+
 import type { LumenStyleSheetTheme } from './theme.types';
 
 /**
@@ -20,7 +15,28 @@ type BorderRadiusToken = keyof LumenStyleSheetTheme['borderRadius'];
 type ShadowToken = keyof LumenStyleSheetTheme['shadows'];
 type TypographyToken = keyof LumenStyleSheetTheme['typographies'];
 
-type SpacingProps = {
+/**
+ * Main public types - combine token props with RN props
+ */
+export type LumenViewStyle = {
+  /**
+   * Flex layout
+   */
+  flex?: ViewStyle['flex'];
+  flexDirection?: ViewStyle['flexDirection'];
+  flexWrap?: ViewStyle['flexWrap'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignItems?: ViewStyle['alignItems'];
+  alignSelf?: ViewStyle['alignSelf'];
+  alignContent?: ViewStyle['alignContent'];
+  flexGrow?: ViewStyle['flexGrow'];
+  flexShrink?: ViewStyle['flexShrink'];
+  flexBasis?: ViewStyle['flexBasis'];
+  position?: ViewStyle['position'];
+  zIndex?: ViewStyle['zIndex'];
+  overflow?: ViewStyle['overflow'];
+  display?: ViewStyle['display'];
+  aspectRatio?: ViewStyle['aspectRatio'];
   /**
    * Padding
    */
@@ -46,33 +62,37 @@ type SpacingProps = {
   marginHorizontal?: SpacingToken;
   marginVertical?: SpacingToken;
   /**
-   * Gaps
+   * Position
+   */
+  top?: SpacingToken;
+  bottom?: SpacingToken;
+  left?: SpacingToken;
+  right?: SpacingToken;
+  start?: SpacingToken;
+  end?: SpacingToken;
+  /**
+   * Gap
    */
   gap?: SpacingToken;
   rowGap?: SpacingToken;
   columnGap?: SpacingToken;
-};
-
-/**
- * Size props - use size tokens only
- */
-type SizeProps = {
+  /**
+   * Size
+   */
   width?: SizeToken;
   height?: SizeToken;
   minWidth?: SizeToken;
   minHeight?: SizeToken;
   maxWidth?: SizeToken;
   maxHeight?: SizeToken;
-};
-
-/**
- * Background color props - use background color tokens only
- */
-type BackgroundColorProps = {
+  /**
+   * Background color
+   */
   backgroundColor?: BackgroundColorToken;
-};
-
-type BorderProps = {
+  /**
+   * Shadow
+   */
+  boxShadow?: ShadowToken;
   /**
    * Border width
    */
@@ -93,7 +113,6 @@ type BorderProps = {
   borderRightColor?: BorderColorToken;
   borderStartColor?: BorderColorToken;
   borderEndColor?: BorderColorToken;
-
   /**
    * Border Radius
    */
@@ -102,91 +121,40 @@ type BorderProps = {
   borderTopRightRadius?: BorderRadiusToken;
   borderBottomLeftRadius?: BorderRadiusToken;
   borderBottomRightRadius?: BorderRadiusToken;
+  /**
+   * Other styles
+   */
+  opacity?: ViewStyle['opacity'];
+  borderStyle?: ViewStyle['borderStyle'];
+  transform?: ViewStyle['transform'];
 };
 
-/**
- * Shadow props - use shadow tokens
- */
-type ShadowProps = {
-  boxShadow?: ShadowToken;
-};
-
-/**
- * Flex layout props - passthrough from React Native
- */
-type FlexLayoutProps = Pick<
-  FlexStyle,
-  | 'flex'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'alignItems'
-  | 'alignSelf'
-  | 'alignContent'
-  | 'flexGrow'
-  | 'flexShrink'
-  | 'flexBasis'
-  | 'position'
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'start'
-  | 'end'
-  | 'zIndex'
-  | 'overflow'
-  | 'display'
-  | 'aspectRatio'
->;
-
-/**
- * Other view style props - passthrough from React Native
- */
-type OtherViewStyleProps = Pick<
-  ViewStyle,
-  'opacity' | 'borderStyle' | 'transform'
->;
-
-/**
- * Text color props - use text color tokens only
- */
-type TextColorProps = {
+export type LumenTextStyle = LumenViewStyle & {
   color?: TextColorToken;
+  typography?: TypographyToken;
+  textAlign?: TextStyle['textAlign'];
+  textTransform?: TextStyle['textTransform'];
+  textDecorationLine?: TextStyle['textDecorationLine'];
 };
 
-/**
- * Typography prop
- */
-type TypographyProps = {
-  typo?: TypographyToken;
-};
-
-/**
- * Text style props - passthrough from React Native
- */
-type OtherTextStyleProps = Pick<
-  TextStyle,
-  'textAlign' | 'textTransform' | 'textDecorationLine'
->;
-
-/**
- * Main public types - combine token props with RN props
- */
-export type LumenViewStyleProps = SpacingProps &
-  SizeProps &
-  BackgroundColorProps &
-  BorderProps &
-  ShadowProps &
-  FlexLayoutProps &
-  OtherViewStyleProps;
-
-export type LumenTextStyleProps = LumenViewStyleProps &
-  TextColorProps &
-  TypographyProps &
-  OtherTextStyleProps;
-
 /**
  * Derived style-only types (for internal resolver use)
  */
-export type LumenViewProps = LumenViewStyleProps & ViewProps;
-export type LumenTextProps = LumenTextStyleProps & TextProps;
+export type LumenViewStyleLX = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenViewStyle;
+};
+export type LumenPressableStyleLX = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenViewStyle;
+};
+export type LumenTextStyleLX = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenTextStyle;
+};

package/src/styles/types/utility.types.ts

@@ -1,4 +1,5 @@
 type NegativeNumber<T extends number> = T & { __negative: true };
+
 export type AddEntriesNegative<T extends Record<string, number>> = T & {
   [K in keyof T as `-${string & K}`]: NegativeNumber<T[K]>;
 };

package/src/styles/utils/index.ts

@@ -0,0 +1 @@
+export * from './mergeStyles';

package/src/styles/utils/mergeStyles.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from '@jest/globals';
+
+import { mergeStyles } from './mergeStyles';
+
+describe('mergeStyles', () => {
+  it('should return empty object when no styles provided', () => {
+    expect(mergeStyles()).toEqual({});
+  });
+
+  it('should merge multiple style objects', () => {
+    expect(
+      mergeStyles({ padding: 16 }, { margin: 8 }, { borderRadius: 4 }),
+    ).toEqual({
+      padding: 16,
+      margin: 8,
+      borderRadius: 4,
+    });
+  });
+
+  it('should filter out falsy values', () => {
+    expect(
+      mergeStyles({ padding: 16 }, false, null, undefined, { margin: 8 }),
+    ).toEqual({
+      padding: 16,
+      margin: 8,
+    });
+  });
+
+  it('should override earlier styles with later ones', () => {
+    expect(
+      mergeStyles({ padding: 16, margin: 8 }, { padding: 24 }, { padding: 32 }),
+    ).toEqual({
+      padding: 32,
+      margin: 8,
+    });
+  });
+
+  it('should work with && conditional pattern', () => {
+    const disabled = true;
+    expect(mergeStyles({ padding: 16 }, disabled && { opacity: 0.5 })).toEqual({
+      padding: 16,
+      opacity: 0.5,
+    });
+  });
+});

package/src/styles/utils/mergeStyles.ts

@@ -0,0 +1,25 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+type StyleValue = ViewStyle & TextStyle & ImageStyle;
+type StyleInput = StyleValue | false | null | undefined;
+
+/**
+ * Merges multiple style objects, filtering out falsy values.
+ * Use with conditional expressions for variant-based styling.
+ *
+ * @example
+ * const style = mergeStyles(
+ *   baseStyle,
+ *   disabled && disabledStyle,
+ * );
+ */
+export const mergeStyles = (...styles: StyleInput[]): StyleValue => {
+  const result: StyleValue = {};
+  for (let i = 0; i < styles.length; i++) {
+    const style = styles[i];
+    if (style) {
+      Object.assign(result, style);
+    }
+  }
+  return result;
+};

package/.storybook/docs/getting-started/StyleSystem.mdx

@@ -1,133 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Style System" />
-
-# Style System
-
-The Ledger Design System provides `LumenStyleSheet` for creating theme-aware styles in React Native.
-
-## LumenStyleSheet.useCreate
-
-Use `LumenStyleSheet.useCreate` to create styles that automatically adapt to the current theme (light/dark mode).
-
-```tsx
-import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { View, Text } from 'react-native';
-
-const MyComponent = () => {
-  const styles = LumenStyleSheet.useCreate((theme) => ({
-    container: {
-      backgroundColor: theme.colors.bg.base,
-      padding: theme.spacings.s16,
-      borderRadius: theme.borderRadius.md,
-    },
-    text: {
-      ...theme.typographies.body1,
-      color: theme.colors.text.base,
-    },
-  }));
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Hello World</Text>
-    </View>
-  );
-};
-```
-
-## Dynamic Styles
-
-Create dynamic style functions that adapt to props or state:
-
-```tsx
-import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { View, Text } from 'react-native';
-
-const Button = ({ appearance, disabled }) => {
-  const styles = LumenStyleSheet.useCreate((theme) => {
-    const getBackgroundColor = () => {
-      if (disabled) return theme.colors.bg.muted;
-      if (appearance === 'accent') return theme.colors.bg.accent;
-      return theme.colors.bg.base;
-    };
-
-    return {
-      button: {
-        backgroundColor: getBackgroundColor(),
-        padding: theme.spacings.s16,
-        opacity: disabled ? 0.5 : 1,
-      },
-      text: {
-        ...theme.typographies.body2,
-        color: appearance === 'accent' 
-          ? theme.colors.text.onAccent 
-          : theme.colors.text.base,
-      },
-    };
-  });
-
-  return (
-    <View style={styles.button}>
-      <Text style={styles.text}>Press me</Text>
-    </View>
-  );
-};
-```
-
-## Theme Integration
-
-`LumenStyleSheet.useCreate` automatically receives the current theme from the [ThemeProvider](/docs/getting-started-theme--docs).
-When the theme mode changes (light/dark), your styles update automatically.
-
-
-## Theme Tokens Reference
-
-### Typographies
-
-Typography semantic tokens are available in the theme.
-It provides a preset of font size, weight, line height and letter spacing.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  title: { 
-    alignItems: 'center',
-    ...theme.typographies.heading1 
-    },
-  body: {
-    flex: 1,
-    ...theme.typographies.body1 
-  },
-}));
-```
-
-### Spacing
-
-Use for width, height, padding, margin, and gap.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  container: {
-    padding: theme.spacings.s16,
-    marginBottom: theme.spacings.s24,
-    gap: theme.spacings.s8,
-  },
-}));
-```
-
-### Colors & Shadows
-
-Apply semantic colors for backgrounds, text, borders, and elevation.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  card: {
-    backgroundColor: theme.colors.bg.surface,
-    borderColor: theme.colors.border.base,
-    ...theme.shadows.md,
-  },
-  label: {
-    color: theme.colors.text.muted,
-  },
-}));
-```
-