rn-vs-lb 1.0.64 → 1.0.66

package/components/Prank/HomelessPrankPage.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { ThemeProvider, useTheme } from '../../theme';
+import Spacer from '../UI/Spacer';
+import HeroPrankCard from './HeroPrankCard';
+import UploadPromptCard from './UploadPromptCard';
+
+const PagePreview: React.FC = () => {
+  const { sizes } = useTheme();
+
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor: '#070C1F' }}
+      contentContainerStyle={{ padding: sizes.lg }}
+    >
+      <View>
+        <HeroPrankCard
+          imageUri="https://images.unsplash.com/photo-1621447462558-42b4d8bc5d9b?auto=format&fit=crop&w=900&q=80"
+          title="Homeless Prank"
+          description="Prank your loved ones with a unknown guest in your home!"
+        />
+        <Spacer size="lg" />
+        <UploadPromptCard onPress={() => console.log('Upload pressed')} />
+      </View>
+      <Spacer size="xl" />
+    </ScrollView>
+  );
+};
+
+const meta: Meta<typeof PagePreview> = {
+  title: 'Features/Prank/HomelessPrankPage',
+  component: PagePreview,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ flex: 1 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#070C1F' },
+        { name: 'light', value: '#f5f5f5' },
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof PagePreview> = () => <PagePreview />;

package/components/Prank/UploadPromptCard.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+
+import { ThemeProvider } from '../../theme';
+import UploadPromptCard from './UploadPromptCard';
+
+const meta: Meta<typeof UploadPromptCard> = {
+  title: 'Features/Prank/UploadPromptCard',
+  component: UploadPromptCard,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ padding: 24, backgroundColor: '#070C1F', flex: 1 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    message: 'Tap here to upload the photo you want to bring to life!'
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#070C1F' },
+        { name: 'light', value: '#f5f5f5' },
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UploadPromptCard>;
+
+export const Default: Story = {
+  args: {
+    onPress: () => console.log('Upload pressed'),
+  },
+};
+
+export const Uploading: Story = {
+  args: {
+    isUploading: true,
+    progress: 0.45,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/components/Prank/UploadPromptCard.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+import Spacer from '../UI/Spacer';
+import { ThemeType, SizesType, useTheme } from '../../theme';
+
+export interface UploadPromptCardProps {
+  message?: string;
+  onPress?: () => void;
+  isUploading?: boolean;
+  progress?: number;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const UploadPromptCard: React.FC<UploadPromptCardProps> = ({
+  message = 'Tap here to upload the photo you want to bring to life!',
+  onPress,
+  isUploading = false,
+  progress,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const { theme, sizes } = useTheme();
+  const styles = React.useMemo(() => getStyles({ theme, sizes }), [theme, sizes]);
+
+  const isDisabled = disabled || isUploading;
+
+  const renderUploading = () => {
+    const normalizedProgress =
+      typeof progress === 'number'
+        ? Math.min(1, Math.max(0, progress))
+        : undefined;
+    const percentage =
+      normalizedProgress !== undefined
+        ? Math.round(normalizedProgress * 100)
+        : undefined;
+
+    return (
+      <>
+        <ActivityIndicator color={theme.white} size="large" />
+        <Spacer size="sm" />
+        <Text style={styles.uploadingLabel}>
+          {percentage !== undefined ? `Uploading ${percentage}%` : 'Uploading...'}
+        </Text>
+      </>
+    );
+  };
+
+  const renderIdle = () => (
+    <>
+      <View style={styles.iconContainer}>
+        <Ionicons name="image-outline" size={36} color={theme.white} />
+      </View>
+      <Spacer size="sm" />
+      <Text style={styles.message} numberOfLines={3}>
+        {message}
+      </Text>
+    </>
+  );
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.85}
+      onPress={onPress}
+      disabled={isDisabled || !onPress}
+      style={[styles.container, isDisabled && styles.disabled, style]}
+      testID={testID}
+    >
+      {isUploading ? renderUploading() : renderIdle()}
+    </TouchableOpacity>
+  );
+};
+
+interface StyleParams {
+  theme: ThemeType;
+  sizes: SizesType;
+}
+
+const getStyles = ({ theme, sizes }: StyleParams) =>
+  StyleSheet.create({
+    container: {
+      borderRadius: sizes.radius_lg,
+      backgroundColor: 'rgba(255,255,255,0.05)',
+      borderWidth: 1,
+      borderColor: 'rgba(255,255,255,0.12)',
+      paddingHorizontal: sizes.lg,
+      paddingVertical: sizes.xl,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 180,
+    },
+    disabled: {
+      opacity: 0.6,
+    },
+    iconContainer: {
+      width: 64,
+      height: 64,
+      borderRadius: 20,
+      backgroundColor: 'rgba(255,255,255,0.08)',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    message: {
+      fontSize: sizes.font,
+      lineHeight: 22,
+      textAlign: 'center',
+      color: 'rgba(255,255,255,0.85)',
+      fontWeight: '500',
+    },
+    uploadingLabel: {
+      fontSize: sizes.font,
+      lineHeight: 22,
+      color: 'rgba(255,255,255,0.85)',
+      fontWeight: '500',
+    },
+  });
+
+export default UploadPromptCard;

package/components/Prank/index.ts

@@ -0,0 +1,5 @@
+export { default as HeroPrankCard } from './HeroPrankCard';
+export type { HeroPrankCardProps } from './HeroPrankCard';
+
+export { default as UploadPromptCard } from './UploadPromptCard';
+export type { UploadPromptCardProps } from './UploadPromptCard';

package/components/Profile/ModalProfilePhoto.stories.tsx

@@ -5,7 +5,7 @@ import { View, Button } from 'react-native';
 import { ModalProfilePhoto } from './ModalProfilePhoto'; // <-- проверь путь!
 
 const meta = {
-  title: 'Profile/ModalProfilePhoto',
+  title: 'Features/Profile/ModalProfilePhoto',
   component: ModalProfilePhoto,
   argTypes: {
     handleClosePreview: { action: 'handleClosePreview' },

package/components/Profile/ProfileCard/ProfileCard.stories.tsx

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import PureProfileCard from  "./ProfileCard";
 
 const meta = {
-  title: 'Profile/ProfileCard',
+  title: 'Features/Profile/ProfileCard',
   component: PureProfileCard,
   argTypes: {
     onBack: { action: 'onBack' },

package/components/Profile/ProfilePhotoBanner.stories.tsx

@@ -4,7 +4,7 @@ import { View, ScrollView } from 'react-native';
 import ProfilePhotoBanner from './ProfilePhotoBanner';
 
 const meta: Meta<React.ComponentProps<typeof ProfilePhotoBanner>> = {
-  title: 'Profile/ProfilePhotoBanner',
+  title: 'Features/Profile/ProfilePhotoBanner',
   component: ProfilePhotoBanner,
   decorators: [
     (Story) => (
@@ -34,11 +34,18 @@ const closeHandler = () => {
 
 export const Default = Template.bind({});
 Default.args = {
+  message: 'Upload a photo — it will help others recognize and trust you.',
+  buttonText: 'Add Photo',
 };
 
 export const InsideScrollableList: StoryFn = () => (
   <ScrollView contentContainerStyle={{ gap: 12, padding: 16 }}>
-    <ProfilePhotoBanner onAddPhoto={addPhotoHandler} onClose={closeHandler} />
+    <ProfilePhotoBanner
+      onAddPhoto={addPhotoHandler}
+      onClose={closeHandler}
+      message="Upload a photo — it will help others recognize and trust you."
+      buttonText="Add Photo"
+    />
     <View style={{ height: 150, backgroundColor: '#f0f0f0', borderRadius: 12 }} />
     <View style={{ height: 150, backgroundColor: '#f5f5f5', borderRadius: 12 }} />
     <View style={{ height: 150, backgroundColor: '#fafafa', borderRadius: 12 }} />
@@ -61,6 +68,8 @@ export const DismissibleBehaviour: StoryFn = () => {
             closeHandler();
             setVisible(false);
           }}
+          message="Upload a photo — it will help others recognize and trust you."
+          buttonText="Add Photo"
         />
       )}
       <View style={{ height: 160, backgroundColor: '#d9ecff', borderRadius: 16 }} />

package/components/Profile/ProfilePhotoBanner.tsx

@@ -7,21 +7,23 @@ import Button from '../Button/Button';
 interface Props {
   onAddPhoto: () => void;
   onClose: () => void;
+  message: string;
+  buttonText: string;
 }
 
-const ProfilePhotoBanner: React.FC<Props> = ({ onAddPhoto, onClose }) => {
+const ProfilePhotoBanner: React.FC<Props> = ({ onAddPhoto, onClose, message, buttonText }) => {
   const { theme, typography } = useTheme();
   const styles = getStyles({ theme });
 
   return (
     <View style={styles.container}>
       <View style={styles.row}>
-        <Text style={[typography.body, styles.text]}>Upload a photo — it will help others recognize and trust you.</Text>
+        <Text style={[typography.body, styles.text]}>{message}</Text>
         <TouchableOpacity onPress={onClose} style={styles.closeButton}>
           <Ionicons name="close" size={20} color={theme.text} />
         </TouchableOpacity>
       </View>
-      <Button title="Add Photo" onPress={onAddPhoto} />
+      <Button title={buttonText} onPress={onAddPhoto} />
     </View>
   );
 };

package/components/Profile/ProfilePhotoUpload/ProfilePhotoUpload.stories.tsx

@@ -5,7 +5,7 @@ import { View, Button } from 'react-native';
 import PureProfilePhotoUpload from './ProfilePhotoUpload';
 
 const meta = {
-  title: 'Profile/PureProfilePhotoUpload',
+  title: 'Features/Profile/PureProfilePhotoUpload',
   component: PureProfilePhotoUpload,
   argTypes: {
     onPressSelect: { action: 'onPressSelect' },

package/components/Profile/ProfileSummary/ProfileSummary.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { View } from 'react-native';
+import ProfileSummary, { ProfileSummaryProps } from './ProfileSummary';
+
+const meta: Meta<ProfileSummaryProps> = {
+  title: 'Features/Profile/ProfileSummary',
+  component: ProfileSummary,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  argTypes: {
+    onAvatarPress: { action: 'avatar press' },
+    onAddPress: { action: 'add press' },
+    onEditPress: { action: 'edit press' },
+    onWebsitePress: { action: 'website press' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<ProfileSummaryProps> = (args) => <ProfileSummary {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  avatarUri:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=200&q=80',
+  name: 'AiPair.pro',
+  username: '@ai_pair',
+  stats: [
+    { label: 'Following', value: '2' },
+    { label: 'Follower', value: '1' },
+    { label: 'Likes', value: '165' },
+  ],
+  website: 'https://aipair.pro',
+};
+
+export const WithoutAddButton = Template.bind({});
+WithoutAddButton.args = {
+  ...Default.args,
+  showAddButton: false,
+};
+
+export const WithLongName = Template.bind({});
+WithLongName.args = {
+  ...Default.args,
+  name: 'AiPair.pro — Personal AI assistant hub',
+};

package/components/Profile/ProfileSummary/ProfileSummary.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Button from '../../Button/Button';
+import Spacer from '../../UI/Spacer';
+import TextWithLinks from '../../UI/TextWithLinks';
+import { useTheme } from '../../../theme';
+
+type ProfileStat = {
+  /** Title displayed under the numeric value. */
+  label: string;
+  /** Numeric or string value displayed above the label. */
+  value: string | number;
+};
+
+export interface ProfileSummaryProps {
+  /** Remote uri for the avatar. */
+  avatarUri: string;
+  /** Main profile name. */
+  name: string;
+  /** Secondary username, e.g. @handle. */
+  username: string;
+  /** Collection of statistics shown under the username. */
+  stats: ProfileStat[];
+  /** Optional website text shown as a link under the stats. */
+  website?: string;
+  /** Custom handler for link clicks. */
+  onWebsitePress?: (url: string) => void;
+  /** Called when avatar is pressed. */
+  onAvatarPress?: () => void;
+  /** Called when floating add button on avatar pressed. */
+  onAddPress?: () => void;
+  /** Called when edit button pressed. */
+  onEditPress?: () => void;
+  /** Controls visibility of floating add button. */
+  showAddButton?: boolean;
+  /** Custom label for edit button. */
+  editLabel?: string;
+}
+
+const ProfileSummary: React.FC<ProfileSummaryProps> = ({
+  avatarUri,
+  name,
+  username,
+  stats,
+  website,
+  onWebsitePress,
+  onAvatarPress,
+  onAddPress,
+  onEditPress,
+  showAddButton = true,
+  editLabel = 'Edit',
+}) => {
+  const { theme, typography, sizes } = useTheme();
+
+  return (
+    <View style={[styles.container, { paddingHorizontal: sizes.lg }]}> 
+      <View style={styles.avatarWrapper}>
+        <TouchableOpacity onPress={onAvatarPress} activeOpacity={0.8}>
+          <Image source={{ uri: avatarUri }} style={styles.avatar} />
+        </TouchableOpacity>
+
+        {showAddButton && (
+          <TouchableOpacity
+            onPress={onAddPress}
+            activeOpacity={0.8}
+            style={[styles.addButton, { backgroundColor: theme.primary }]}
+          >
+            <Ionicons name="add" size={20} color={theme.white} />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <Spacer size="sm" />
+
+      <View style={styles.nameRow}>
+        <Text style={[typography.titleH4, styles.centerText]}>{name}</Text>
+        <Button
+          title={editLabel}
+          type="gray-outline"
+          onPress={onEditPress}
+          style={[styles.editButton, { marginLeft: sizes.sm }]}
+          textStyle={styles.editButtonText}
+          disabled={!onEditPress}
+        />
+      </View>
+
+      <Text style={[typography.body, styles.username, { color: theme.description }]}>{username}</Text>
+
+      <Spacer size="md" />
+
+      <View style={styles.statsRow}>
+        {stats.map((stat) => (
+          <View key={stat.label} style={styles.statItem}>
+            <Text style={[typography.titleH6, styles.statValue]}>{stat.value}</Text>
+            <Text style={[typography.bodySm, styles.statLabel, { color: theme.description }]}>{stat.label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {website ? (
+        <>
+          <Spacer size="sm" />
+          <TextWithLinks
+            text={website}
+            style={[typography.body, styles.centerText]}
+            linkTextStyle={[styles.websiteLink, { color: theme.primary }]}
+            onLinkPress={onWebsitePress}
+          />
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingVertical: 24,
+  },
+  avatarWrapper: {
+    position: 'relative',
+  },
+  avatar: {
+    width: 112,
+    height: 112,
+    borderRadius: 56,
+    backgroundColor: '#2B2B2B',
+  },
+  addButton: {
+    position: 'absolute',
+    bottom: 4,
+    right: -4,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 4,
+  },
+  nameRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerText: {
+    textAlign: 'center',
+  },
+  editButton: {
+    minHeight: 32,
+    paddingHorizontal: 14,
+    borderRadius: 16,
+    width: 'auto',
+    alignSelf: 'center',
+  },
+  editButtonText: {
+    fontSize: 14,
+  },
+  username: {
+    marginTop: 4,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    maxWidth: 280,
+  },
+  statItem: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  statValue: {
+    fontWeight: '600',
+  },
+  statLabel: {
+    marginTop: 2,
+  },
+  websiteLink: {
+    fontWeight: '500',
+  },
+});
+
+export default ProfileSummary;

package/components/Profile/ProfileTabs/UserProfileTabs.stories.tsx

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import UserProfileTabs, { type UserProfileTab } from './UserProfileTabs';
 
 const meta = {
-  title: 'Profile/UserProfileTabs',
+  title: 'Features/Profile/UserProfileTabs',
   component: UserProfileTabs,
   decorators: [(Story) => <View style={{ padding: 12 }}><Story /></View>],
   argTypes: {

package/components/Profile/index.ts

@@ -6,3 +6,5 @@ export { default as ProfilePhotoUpload } from './ProfilePhotoUpload/ProfilePhoto
 export type { ProfilePhotoUploadProps } from './ProfilePhotoUpload/ProfilePhotoUpload';
 export { default as UserProfileTabs } from './ProfileTabs/UserProfileTabs';
 export type { UserProfileTab } from './ProfileTabs/UserProfileTabs';
+export { default as ProfileSummary } from './ProfileSummary/ProfileSummary';
+export type { ProfileSummaryProps } from './ProfileSummary/ProfileSummary';