@ledgerhq/lumen-ui-rnative 0.0.47 → 0.0.48

package/src/lib/Components/Tile/Tile.tsx

@@ -1,12 +1,27 @@
-import React, { FC, forwardRef } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import {
+  createSafeContext,
+  isTextChildren,
+} from '@ledgerhq/lumen-utils-shared';
+import React, { forwardRef, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { Pressable } from '../Utility';
-import { TileProps } from './types';
+import { Spot } from '../Spot';
+import { Box, Pressable, Text } from '../Utility';
+import {
+  TileContentProps,
+  TileContextValue,
+  TileDescriptionProps,
+  TileProps,
+  TileSpotProps,
+  TileTitleProps,
+} from './types';
+
+const [TileProvider, useTileContext] =
+  createSafeContext<TileContextValue>('Tile');
 
 type Appearance = NonNullable<TileProps['appearance']>;
 
-const useStyles = ({
+const useRootStyles = ({
   appearance,
   disabled,
   pressed,
@@ -35,7 +50,8 @@ const useStyles = ({
             width: '100%',
             alignItems: 'center',
             gap: t.spacings.s8,
-            padding: t.spacings.s8,
+            paddingHorizontal: t.spacings.s8,
+            paddingVertical: t.spacings.s12,
             borderRadius: t.borderRadius.sm,
             backgroundColor: bgColors[appearance],
           },
@@ -44,152 +60,283 @@ const useStyles = ({
               backgroundColor: pressedBgColors[appearance],
             },
         ]),
-        contentWrapper: {
-          width: t.sizes.full,
-          alignItems: 'center',
-          gap: t.spacings.s8,
-        },
-        leadingWrapper: {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        textWrapper: {
-          width: t.sizes.full,
-          alignItems: 'center',
-          gap: t.spacings.s4,
-        },
-        titleWrapper: {
-          width: t.sizes.full,
-          alignItems: 'center',
-        },
-        title: StyleSheet.flatten([
-          t.typographies.body3SemiBold,
-          {
-            width: t.sizes.full,
-            textAlign: 'center',
-            color: disabled ? t.colors.text.disabled : t.colors.text.base,
-          },
-        ]),
-        description: StyleSheet.flatten([
-          t.typographies.body3,
-          {
-            width: t.sizes.full,
-            textAlign: 'center',
-            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-          },
-        ]),
       };
     },
     [appearance, disabled, pressed],
   );
 };
 
-type TileContentProps = {
-  appearance: Appearance;
-  disabled: boolean;
-  pressed: boolean;
-  leadingContent: TileProps['leadingContent'];
-  title: string;
-  description?: string;
-  trailingContent?: TileProps['trailingContent'];
-};
-
-const TileContent: FC<TileContentProps> = ({
-  appearance,
-  disabled,
-  pressed,
-  leadingContent,
-  title,
-  description,
-  trailingContent,
-}) => {
-  const styles = useStyles({ appearance, disabled, pressed });
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.contentWrapper}>
-        <View style={styles.leadingWrapper}>{leadingContent}</View>
-        <View style={styles.textWrapper}>
-          <View style={styles.titleWrapper}>
-            <Text numberOfLines={1} style={styles.title}>
-              {title}
-            </Text>
-            {description && (
-              <Text numberOfLines={1} style={styles.description}>
-                {description}
-              </Text>
-            )}
-          </View>
-          {trailingContent}
-        </View>
-      </View>
-    </View>
-  );
-};
-
 /**
- * A tile list item component that displays a spot icon at the top, title and optional description,
- * and optional trailing content at the bottom. It functions as a pressable component with active states,
- * and supports long press actions.
+ * A flexible tile component that uses a composite pattern for maximum customization.
+ * Displays content in a vertical layout with support for spots, text, and custom content.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-tile--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-tile--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 tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * // Basic tile item
- * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with spot and content
+ * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <Tile
- *   title="Ethereum"
- *   description="ETH"
- *   leadingContent={<Spot appearance="coin" icon={Wallet} />}
- *   onPress={() => console.log('Pressed!')}
- *   onLongPress={() => console.log('Long pressed!')}
- * />
+ * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
+ *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <TileContent>
+ *     <TileTitle>My Wallet</TileTitle>
+ *     <TileDescription>Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ *
+ * @example
+ * // With custom content and long press
+ * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
+ *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <TileContent>
+ *     <TileTitle>Bitcoin</TileTitle>
+ *   </TileContent>
+ *   <Tag label="Active" />
+ * </Tile>
  */
 export const Tile = forwardRef<React.ElementRef<typeof Pressable>, TileProps>(
   (
     {
       lx = {},
       style,
-      title,
-      description,
-      leadingContent,
-      trailingContent,
       appearance = 'no-background',
       disabled = false,
+      children,
       ...props
     },
     ref,
   ) => {
     return (
-      <Pressable
-        ref={ref}
-        lx={lx}
-        style={style}
-        disabled={disabled}
-        accessibilityRole='button'
-        accessibilityState={{ disabled }}
-        {...props}
-      >
-        {({ pressed }) => (
-          <TileContent
-            appearance={appearance}
-            disabled={disabled}
-            pressed={pressed}
-            leadingContent={leadingContent}
-            title={title}
-            description={description}
-            trailingContent={trailingContent}
-          />
-        )}
-      </Pressable>
+      <TileProvider value={{ disabled }}>
+        <Pressable
+          ref={ref}
+          lx={lx}
+          style={StyleSheet.flatten([{ width: '100%' }, style])}
+          disabled={disabled}
+          accessibilityRole='button'
+          accessibilityState={{ disabled }}
+          {...props}
+        >
+          {({ pressed }) => (
+            <TilePressableContent
+              appearance={appearance}
+              disabled={disabled}
+              pressed={pressed}
+            >
+              {children}
+            </TilePressableContent>
+          )}
+        </Pressable>
+      </TileProvider>
     );
   },
 );
-
 Tile.displayName = 'Tile';
+
+const TilePressableContent = ({
+  appearance,
+  disabled,
+  pressed,
+  children,
+}: {
+  appearance: Appearance;
+  disabled: boolean;
+  pressed: boolean;
+  children: ReactNode;
+}) => {
+  const styles = useRootStyles({ appearance, disabled, pressed });
+  return <View style={styles.container}>{children}</View>;
+};
+
+/**
+ * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
+ * Always renders at a fixed size of 48.
+ *
+ * @example
+ * <Tile>
+ *   <TileSpot appearance="icon" icon={Settings} />
+ * </Tile>
+ */
+export const TileSpot = (props: TileSpotProps) => {
+  const { disabled } = useTileContext({
+    consumerName: 'TileSpot',
+    contextRequired: true,
+  });
+  return <Spot {...props} size={48} disabled={disabled} />;
+};
+
+const useContentStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        width: t.sizes.full,
+        alignItems: 'center',
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+};
+TileSpot.displayName = 'TileSpot';
+
+/**
+ * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * Use this to wrap text content within a Tile.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export const TileContent = ({ children, lx, style }: TileContentProps) => {
+  const styles = useContentStyles();
+  return (
+    <Box
+      lx={lx}
+      style={StyleSheet.flatten([styles.container, style])}
+      testID='tile-content'
+    >
+      {children}
+    </Box>
+  );
+};
+TileContent.displayName = 'TileContent';
+
+const useTitleStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        width: t.sizes.full,
+        alignItems: 'center',
+      },
+      text: StyleSheet.flatten([
+        t.typographies.body3SemiBold,
+        {
+          alignItems: 'center',
+          width: t.sizes.full,
+          textAlign: 'center',
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
+        },
+      ]),
+    }),
+    [disabled],
+  );
+};
+
+/**
+ * The primary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ */
+export const TileTitle = ({ children, lx, style }: TileTitleProps) => {
+  const { disabled } = useTileContext({
+    consumerName: 'TileTitle',
+    contextRequired: true,
+  });
+  const styles = useTitleStyles({ disabled });
+
+  if (isTextChildren(children)) {
+    return (
+      <Text
+        testID='tile-title'
+        numberOfLines={1}
+        lx={lx}
+        style={StyleSheet.flatten([styles.text, style])}
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <Box
+      lx={lx}
+      style={StyleSheet.flatten([styles.container, style])}
+      testID='tile-title'
+    >
+      {children}
+    </Box>
+  );
+};
+TileTitle.displayName = 'TileTitle';
+
+const useDescriptionStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        width: t.sizes.full,
+        alignItems: 'center',
+      },
+      text: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          width: t.sizes.full,
+          alignItems: 'center',
+          textAlign: 'center',
+          color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+        },
+      ]),
+    }),
+    [disabled],
+  );
+};
+
+/**
+ * The secondary text label for a Tile. Automatically inherits the disabled state from the parent Tile.
+ * Text will truncate with ellipsis if it exceeds the available width.
+ * If children is a string, it will be automatically wrapped in a Text component.
+ *
+ * @example
+ * <Tile>
+ *   <TileContent>
+ *     <TileTitle>My Title</TileTitle>
+ *     <TileDescription>My Description</TileDescription>
+ *   </TileContent>
+ * </Tile>
+ */
+export const TileDescription = ({
+  children,
+  lx,
+  style,
+}: TileDescriptionProps) => {
+  const { disabled } = useTileContext({
+    consumerName: 'TileDescription',
+    contextRequired: true,
+  });
+  const styles = useDescriptionStyles({ disabled });
+
+  if (isTextChildren(children)) {
+    return (
+      <Text
+        lx={lx}
+        numberOfLines={1}
+        style={StyleSheet.flatten([styles.text, style])}
+        testID='tile-description'
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <Box
+      lx={lx}
+      style={StyleSheet.flatten([styles.container, style])}
+      testID='tile-description'
+    >
+      {children}
+    </Box>
+  );
+};
+TileDescription.displayName = 'TileDescription';

package/src/lib/Components/Tile/index.ts

@@ -1,2 +1,8 @@
-export * from './Tile';
+export {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from './Tile';
 export * from './types';

package/src/lib/Components/Tile/types.ts

@@ -1,25 +1,16 @@
 import { ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import {
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
+} from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot/types';
+
+export type TileContextValue = {
+  disabled: boolean;
+};
 
 export type TileProps = {
-  /**
-   * Custom content to display at the top (leading area) of the tile.
-   * Accepts ReactNode such as <Spot appearance="icon" icon={Settings} />
-   */
-  leadingContent: ReactNode;
-  /**
-   * The title of the tile.
-   */
-  title: string;
-  /**
-   * The description of the tile.
-   */
-  description?: string;
-  /**
-   * Custom content to display at the bottom (trailing area) of the tile.
-   * Accepts ReactNode such as <Tag label="New" appearance="base" />
-   */
-  trailingContent?: ReactNode;
   /**
    * The visual style of the tile.
    * - `no-background`: Transparent background with pressed state
@@ -42,4 +33,32 @@ export type TileProps = {
    * Can be used to perform secondary actions.
    */
   onLongPress?: StyledPressableProps['onLongPress'];
+  /**
+   * The children to display inside the tile.
+   */
+  children: ReactNode;
 } & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+
+export type TileSpotProps = DiscriminatedSpotProps;
+
+export type TileContentProps = {
+  /**
+   * The children to display inside the tile content area.
+   * Typically contains TileTitle and TileDescription.
+   */
+  children: ReactNode;
+} & StyledViewProps;
+
+export type TileTitleProps = {
+  /**
+   * The title text to display.
+   */
+  children: ReactNode;
+} & StyledViewProps;
+
+export type TileDescriptionProps = {
+  /**
+   * The description text to display.
+   */
+  children: ReactNode;
+} & StyledTextProps;

package/src/lib/Components/index.ts

@@ -5,6 +5,7 @@ export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
+export * from './Divider';
 export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';