feat: Atomic Components for Card refactor

Author: adrienzheng-cb

apps/mobile-app/scripts/utils/routes.mjs

@@ -43,6 +43,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
   },
+  {
+    key: 'AlphaSelectChip',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
+  },
   {
     key: 'AlphaTabbedChips',
     getComponent: () =>

apps/mobile-app/src/routes.ts

@@ -43,6 +43,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
   },
+  {
+    key: 'AlphaSelectChip',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
+  },
   {
     key: 'AlphaTabbedChips',
     getComponent: () =>
@@ -539,7 +544,7 @@ export const routes = [
   {
     key: 'SelectChip',
     getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/SelectChip.stories').default,
+      require('@coinbase/cds-mobile/chips/__stories__/SelectChip.stories').default,
   },
   {
     key: 'SelectOption',

…-chip/__stories__/SelectChip.stories.tsx …/__stories__/AlphaSelectChip.stories.tsxpackages/mobile/src/alpha/select-chip/__stories__/SelectChip.stories.tsx renamed to packages/mobile/src/alpha/select-chip/__stories__/AlphaSelectChip.stories.tsx packages/mobile/src/alpha/select-chip/__stories__/SelectChip.stories.tsx renamed to packages/mobile/src/alpha/select-chip/__stories__/AlphaSelectChip.stories.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef, memo } from 'react';
+import type { Text as NativeText } from 'react-native';
+
+import { Text as CDSText, type TextProps } from '../typography/Text';
+
+export type CardDescriptionProps = TextProps;
+
+export const CardDescription = memo(
+  forwardRef<NativeText, CardDescriptionProps>(
+    ({ font = 'label2', color = 'fgMuted', ...props }, ref) => {
+      return <CDSText ref={ref} color={color} font={font} {...props} />;
+    },
+  ),
+);
+
+CardDescription.displayName = 'CardDescription';

packages/mobile/src/cards/CardDescription.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import {
   defaultMediaDimension,
   defaultMediaSize,
@@ -11,8 +11,7 @@ import type {
 } from '@coinbase/cds-common/types';
 
 import { Pictogram, SpotSquare } from '../illustrations';
-
-import { CardRemoteImage } from './CardRemoteImage';
+import { getSource, RemoteImage } from '../media/RemoteImage';
 
 export type CardMediaProps = CommonCardMediaProps;
 
@@ -50,8 +49,10 @@ export const CardMedia = memo(function CardMedia({ placement = 'end', ...props }
       );
     case 'image':
       return (
-        <CardRemoteImage
+        <RemoteImage
           alt={props.alt ?? ''}
+          resizeMode="cover"
+          source={getSource(props.src)}
           src={props.src}
           testID={props.testID}
           {...imageProps[placement]}

packages/mobile/src/cards/CardMedia.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef, memo } from 'react';
+import type { View } from 'react-native';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+
+import { HStack, type HStackProps } from '../layout/HStack';
+import { Pressable, type PressableProps } from '../system/Pressable';
+
+export type CardRootBaseProps = SharedAccessibilityProps &
+  SharedProps & {
+    children: React.ReactNode;
+    actionable?: boolean;
+  };
+
+export type CardRootProps = CardRootBaseProps & PressableProps;
+
+export const CardRoot = memo(
+  forwardRef<View, CardRootBaseProps>(({ children, actionable, ...props }, ref) => {
+    const Component = actionable ? Pressable : HStack;
+    return (
+      <Component ref={ref} {...props}>
+        {children}
+      </Component>
+    );
+  }),
+);
+
+CardRoot.displayName = 'CardRoot';

packages/mobile/src/cards/CardRemoteImage.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import type { Text as NativeText } from 'react-native';
+
+import { Text, type TextProps } from '../typography/Text';
+
+export type CardSubtitleProps = TextProps;
+
+/**
+ * Text component with default font and color for Card subtitles.
+ */
+export const CardSubtitle = memo(
+  forwardRef<NativeText, CardSubtitleProps>(
+    ({ font = 'label2', color = 'fgMuted', ...props }, ref) => {
+      return <Text ref={ref} color={color} font={font} {...props} />;
+    },
+  ),
+);
+
+CardSubtitle.displayName = 'CardSubtitle';

packages/mobile/src/cards/CardRoot.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+import { RemoteImage, type RemoteImageProps } from '../media/RemoteImage';
+
+export type CardThumbnailProps = RemoteImageProps;
+
+/**
+ * RemoteImage component with default size and shape for Card thumbnails.
+ */
+export const CardThumbnail = memo(function CardThumbnail({
+  size = 'l',
+  shape = 'circle',
+  ...props
+}: CardThumbnailProps) {
+  return <RemoteImage shape={shape} size={size} {...props} />;
+});
+
+CardThumbnail.displayName = 'CardThumbnail';

packages/mobile/src/cards/CardSubtitle.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef, memo } from 'react';
+import type { Text as NativeText } from 'react-native';
+
+import { Text as CDSText, type TextProps } from '../typography/Text';
+
+export type CardTitleProps = TextProps;
+
+/**
+ * Text component with default font for Card titles.
+ */
+export const CardTitle = memo(
+  forwardRef<NativeText, CardTitleProps>(({ font = 'headline', ...props }, ref) => {
+    return <CDSText ref={ref} font={font} {...props} />;
+  }),
+);
+
+CardTitle.displayName = 'CardTitle';