feat(foundation): added profile card ui

Author: bang9

packages/uikit-react-native-foundation/src/index.ts

@@ -25,6 +25,7 @@ export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
 export { default as Placeholder } from './ui/Placeholder';
+export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
 

packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts

@@ -169,6 +169,16 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundDark01,
+            textBodyLabel: palette.onBackgroundDark02,
+            textBody: palette.onBackgroundDark01,
+            background: palette.background500,
+          },
+        },
+      },
     },
   }),
 });

packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts

@@ -169,6 +169,16 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      profileCard: {
+        default: {
+          none: {
+            textUsername: palette.onBackgroundLight01,
+            textBodyLabel: palette.onBackgroundLight02,
+            textBody: palette.onBackgroundLight01,
+            background: palette.background50,
+          },
+        },
+      },
     },
   }),
 });

packages/uikit-react-native-foundation/src/types.ts

@@ -39,7 +39,9 @@ export type Component =
   | 'Placeholder'
   | 'Message'
   | 'DateSeparator'
-  | 'GroupChannelPreview';
+  | 'GroupChannelPreview'
+  | 'ProfileCard';
+
 export type GetColorTree<
   Tree extends {
     Variant: {
@@ -65,6 +67,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'incoming' | 'outgoing';
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
+    ProfileCard: 'default';
   };
   State: {
     Header: 'none';
@@ -76,6 +79,7 @@ export type ComponentColorTree = GetColorTree<{
     Message: 'enabled' | 'pressed';
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
+    ProfileCard: 'none';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -96,6 +100,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'coverBackground'
       | 'bodyIconBackground'
       | 'separator';
+    ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -139,6 +144,7 @@ export interface UIKitColors {
     message: ComponentColors<'Message'>;
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
+    profileCard: ComponentColors<'ProfileCard'>;
   };
 }
 

packages/uikit-react-native-foundation/src/ui/ProfileCard/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Pressable, StyleProp, View, ViewStyle } from 'react-native';
+
+import Divider from '../../components/Divider';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  uri: string;
+  username: string;
+
+  bodyLabel: string;
+  body: string;
+};
+
+// TODO: Extract as component
+type OutlinedButtonProps = {
+  children: string;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const OutlinedButton = ({ children, containerStyle }: OutlinedButtonProps) => {
+  return (
+    <Pressable style={[styles.outlinedButton, containerStyle]}>
+      <Text button numberOfLines={1} style={styles.outlinedButtonText}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+const ProfileCard = ({ uri, username, bodyLabel, body }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.profileCard.default.none;
+
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }]}>
+      <View style={styles.profileContainer}>
+        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />
+        <Text h1 color={color.textUsername}>
+          {username}
+        </Text>
+      </View>
+      <OutlinedButton containerStyle={styles.messageButton}>{'Message'}</OutlinedButton>
+      <Divider space={16} />
+      <View style={styles.profileInfoContainer}>
+        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>
+          {bodyLabel}
+        </Text>
+        <Text body3 color={color.textBody}>
+          {body}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  outlinedButton: {
+    borderRadius: 4,
+    padding: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outlinedButtonText: {
+    textAlign: 'center',
+    width: '100%',
+  },
+
+  container: {
+    paddingTop: 32,
+    width: '100%',
+  },
+  profileContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 24,
+  },
+  profileAvatar: {
+    marginBottom: 8,
+  },
+  profileInfoContainer: {
+    padding: 16,
+  },
+  profileInfoBodyLabel: {
+    marginBottom: 4,
+  },
+  messageButton: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+});
+
+export default ProfileCard;

sample/.storybook/storybook.requires.js

@@ -24,7 +24,10 @@ if (parameters) {
   addParameters(parameters);
 }
 
-argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+// temporary fix for https://github.com/storybookjs/react-native/issues/327 whilst the issue is investigated
+try {
+  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+} catch {}
 
 const getStories = () => {
   return [
@@ -35,6 +38,7 @@ const getStories = () => {
     require("../stories/GroupChannelPreview.stories.tsx"),
     require("../stories/Icon.stories.tsx"),
     require("../stories/Placeholder.stories.tsx"),
+    require("../stories/ProfileCard.stories.tsx"),
     require("../stories/Switch.stories.tsx"),
     require("../stories/Text.stories.tsx"),
   ];

sample/stories/ProfileCard.stories.tsx

@@ -0,0 +1,38 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import React from 'react';
+
+import { ProfileCard as ProfileCardComponent } from '@sendbird/uikit-react-native-foundation';
+
+const ProfileCardMeta: ComponentMeta<typeof ProfileCardComponent> = {
+  title: 'ProfileCard',
+  component: ProfileCardComponent,
+  argTypes: {
+    uri: {
+      name: 'Profile URI',
+      control: { type: 'text' },
+    },
+    username: {
+      name: 'Username',
+      control: { type: 'text' },
+    },
+    bodyLabel: {
+      name: 'Body label',
+      control: { type: 'text' },
+    },
+    body: {
+      name: 'Body',
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    uri: 'https://static.sendbird.com/sample/cover/cover_15.jpg',
+    username: 'Member name',
+    bodyLabel: 'User ID',
+    body: 'User1',
+  },
+};
+
+export default ProfileCardMeta;
+
+type ProfileCardStory = ComponentStory<typeof ProfileCardComponent>;
+export const Default: ProfileCardStory = (args) => <ProfileCardComponent {...args} />;