rn-vs-lb 1.0.68 → 1.0.69

package/components/Chat/InputMessage.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, TextInput, TouchableOpacity, Text, Image, ScrollView, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, TextInput, TouchableOpacity, Text, Image, ScrollView, ActivityIndicator, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { ThemeType, useTheme } from '../../theme';
 
@@ -265,7 +265,7 @@ export const getStyles = (theme: ThemeType) =>
       paddingHorizontal: 10,
       paddingVertical: 6,
       borderRadius: 4,
-      top:4,
+      top: Platform.OS === 'ios' ? 4 : undefined,
       borderColor: theme.white,
     },
     sendButton: {

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

@@ -2,6 +2,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { View } from 'react-native';
+import { FontAwesome, FontAwesome5, FontAwesome6, Ionicons, MaterialIcons, Octicons } from '@expo/vector-icons';
 import PureProfileCard from  "./ProfileCard";
 
 const meta = {
@@ -9,17 +10,7 @@ const meta = {
   component: PureProfileCard,
   argTypes: {
     onBack: { action: 'onBack' },
-    onOpenSettings: { action: 'onOpenSettings' },
-    onOpenActivity: { action: 'onOpenActivity' },
-    onOpenSpecialist: { action: 'onOpenSpecialist' },
-    onOpenCreatePoll: { action: 'onOpenCreatePoll' },
-    onOpenCreateEvent: { action: 'onOpenCreateEvent' },
-    onOpenAiBots: { action: 'onOpenAiBots' },
-    onOpenBots: { action: 'onOpenBots' },
-    onOpenUserSheet: { action: 'onOpenUserSheet' },
     onLearnMorePress: { action: 'onLearnMorePress' },
-    onMessage: { action: 'onMessage' },
-    onFollowToggle: { action: 'onFollowToggle' },
   },
   decorators: [
     // если у тебя есть ThemeProvider — оберни им здесь
@@ -32,10 +23,18 @@ const meta = {
     isMe: false,
     isOnline: false,
     lastSeenText: 'Last seen: 2 hours ago',
-    specialistEnabled: true,
-    hideFollowBtn: false,
-    isFollowing: false,
-    hasNotifications: true,
+    headerActions: [
+      {
+        id: 'specialist',
+        icon: <FontAwesome5 size={20} name="id-card" color="#111" />,
+        onPress: () => {},
+      },
+      {
+        id: 'menu',
+        icon: <Ionicons name="ellipsis-horizontal-sharp" size={20} color="#2f7fff" />,
+        onPress: () => {},
+      },
+    ],
   },
 } satisfies Meta<typeof PureProfileCard>;
 
@@ -45,16 +44,95 @@ type S = StoryObj<typeof PureProfileCard>;
 export const Default: S = {};
 export const MeOwner: S = { args: { isMe: true, isOnline: undefined, lastSeenText: undefined } };
 export const OnlineUser: S = { args: { isMe: false, isOnline: true, lastSeenText: undefined } };
-export const Following: S = { args: { isFollowing: true } };
-export const WithoutFollowBtn: S = { args: { hideFollowBtn: true } };
-export const MeOwnerWithCreateActions: S = {
+export const TwoActions: S = {
+  args: {
+    ctaActions: [
+      {
+        label: 'Message',
+        variant: 'primary',
+        icon: <FontAwesome name="send" size={14} color="#fff" />,
+        onPress: () => {},
+      },
+      {
+        label: 'Follow',
+        variant: 'outline',
+        icon: <FontAwesome5 name="user-plus" size={14} color="#2f7fff" />,
+        onPress: () => {},
+      },
+    ],
+  },
+};
+
+export const OneActionFullWidth: S = {
+  args: {
+    ctaActions: [
+      {
+        label: 'Create Poll',
+        icon: <Ionicons name="stats-chart-outline" size={20} color="#2f7fff" />,
+        onPress: () => {},
+      },
+    ],
+  },
+};
+
+export const OwnerTwoActions: S = {
   args: {
     isMe: true,
     isAuth: true,
     isOnline: undefined,
     lastSeenText: undefined,
-    // наличие коллбеков включает сами кнопки
-    onOpenCreatePoll: () => {},
-    onOpenCreateEvent: () => {},
+    headerActions: [
+      {
+        id: 'activity',
+        icon: <FontAwesome name="bell-o" size={21} color="#111" />,
+        onPress: () => {},
+        showDot: true,
+      },
+      {
+        id: 'specialist',
+        icon: <FontAwesome5 size={20} name="id-card" color="#111" />,
+        onPress: () => {},
+      },
+      {
+        id: 'ai-bots',
+        icon: <MaterialIcons name="smart-toy" size={25} color="#111" />,
+        onPress: () => {},
+      },
+      {
+        id: 'bots',
+        icon: <FontAwesome6 style={{ top: -1 }} size={20} name="robot" color="#111" />,
+        onPress: () => {},
+      },
+      {
+        id: 'settings',
+        icon: <Ionicons size={24} name="settings-outline" color="#111" />,
+        onPress: () => {},
+      },
+    ],
+    ctaActions: [
+      {
+        label: 'Create Poll',
+        icon: <Ionicons name="stats-chart-outline" size={20} color="#2f7fff" />,
+        onPress: () => {},
+      },
+      {
+        label: 'Create Event',
+        icon: <Octicons name="diff-added" size={20} color="#2f7fff" />,
+        onPress: () => {},
+      },
+    ],
+  },
+};
+
+export const SixHeaderActions: S = {
+  args: {
+    headerActions: [
+      { id: 'a1', icon: <FontAwesome name="bell-o" size={21} color="#111" />, onPress: () => {}, showDot: true },
+      { id: 'a2', icon: <FontAwesome5 size={20} name="id-card" color="#111" />, onPress: () => {} },
+      { id: 'a3', icon: <MaterialIcons name="smart-toy" size={25} color="#111" />, onPress: () => {} },
+      { id: 'a4', icon: <FontAwesome6 style={{ top: -1 }} size={20} name="robot" color="#111" />, onPress: () => {} },
+      { id: 'a5', icon: <Ionicons size={24} name="settings-outline" color="#111" />, onPress: () => {} },
+      { id: 'a6', icon: <Ionicons name="ellipsis-horizontal-sharp" size={20} color="#2f7fff" />, onPress: () => {} },
+    ],
   },
 };

package/components/Profile/ProfileCard/ProfileCard.tsx

@@ -7,9 +7,23 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { Ionicons, FontAwesome, FontAwesome5, Octicons, MaterialIcons, FontAwesome6 } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { useProfileCardStyles } from './useProfileCardStyles';
 
+export type PureProfileCardHeaderAction = {
+  id?: string;
+  onPress: () => Promise<void> | void;
+  icon: React.ReactNode;
+  showDot?: boolean;
+};
+
+export type PureProfileCardCtaAction = {
+  label: string;
+  onPress: () => Promise<void> | void;
+  icon?: React.ReactNode;
+  variant?: 'primary' | 'outline';
+};
+
 export type PureProfileCardProps = {
   name: string;
   imageUri: string;
@@ -22,39 +36,25 @@ export type PureProfileCardProps = {
 
   /** действия/навигация */
   onBack?: () => void;
-  onOpenSettings?: () => void;
-  onOpenActivity?: () => void;
-  onOpenSpecialist?: () => void;
-  onOpenCreatePoll?: () => void;
-  onOpenCreateEvent?: () => void;
-  onOpenAiBots?: () => void;
-  onOpenBots?: () => void;
-  onOpenUserSheet?: () => void;
+  headerActions?: PureProfileCardHeaderAction[];
 
   /** CTA */
   onLearnMorePress?: () => void;
-  onMessage?: () => Promise<void> | void;
-  onFollowToggle?: () => void;
-
-  /** UI-флаги */
-  specialistEnabled?: boolean;
-  hideFollowBtn?: boolean;
-  isFollowing?: boolean;
-  hasNotifications?: boolean;
+  ctaActions?: PureProfileCardCtaAction[];
 };
 
 export default function PureProfileCard(props: PureProfileCardProps) {
   const {
     name, imageUri,
     isAuth, isMe, isOnline, lastSeenText,
-    onBack, onOpenSettings, onOpenActivity, onOpenSpecialist,
-    onOpenCreatePoll, onOpenCreateEvent, onOpenAiBots, onOpenBots, onOpenUserSheet,
-    onLearnMorePress, onMessage, onFollowToggle,
-    specialistEnabled, hideFollowBtn, isFollowing, hasNotifications,
+    onBack, headerActions,
+    onLearnMorePress, ctaActions,
   } = props;
 
   const { theme, globalStyleSheet, typography, styles } = useProfileCardStyles();
   const [previewVisible, setPreviewVisible] = useState(false);
+  const visibleHeaderActions = (headerActions ?? []).slice(0, 6);
+  const visibleCtaActions = (ctaActions ?? []).slice(0, 2);
 
   return (
     <View style={styles.cardContainer}>
@@ -64,74 +64,20 @@ export default function PureProfileCard(props: PureProfileCardProps) {
           <Ionicons size={24} name="arrow-back" color={theme.text} />
         </TouchableOpacity>
 
-        {!isMe ? (
-          <View style={styles.settingSection}>
-            {specialistEnabled && onOpenSpecialist && (
-              <TouchableOpacity onPress={onOpenSpecialist}>
-                <View style={styles.iconBackground}>
-                  <FontAwesome5 size={20} name="id-card" color={theme.text} />
-                </View>
-              </TouchableOpacity>
-            )}
-            {onOpenUserSheet && (
-              <TouchableOpacity onPress={() => onOpenUserSheet()}>
-                <View style={styles.iconBackground}>
-                  <Ionicons name="ellipsis-horizontal-sharp" size={20} color={theme.primary} />
-                </View>
-              </TouchableOpacity>
-            )}
-          </View>
-        ) : (
-          <View style={styles.settingSection}>
-            {onOpenActivity && (
-              <View>
-                <TouchableOpacity onPress={onOpenActivity}>
-                  <View style={styles.iconBackground}>
-                    <FontAwesome size={21} name="bell-o" color={theme.text} />
-                  </View>
-                </TouchableOpacity>
-                {hasNotifications && (
-                  <View style={{
-                    position: 'absolute', right: 5, top: 2,
-                    width: 8, height: 8, borderRadius: 4, backgroundColor: theme.danger,
-                  }} />
-                )}
-              </View>
-            )}
-
-            {onOpenSpecialist && (
-              <TouchableOpacity onPress={onOpenSpecialist}>
-                <View style={styles.iconBackground}>
-                  <FontAwesome5 size={20} name="id-card" color={theme.text} />
-                </View>
-              </TouchableOpacity>
-            )}
-
-            {onOpenAiBots && (
-              <TouchableOpacity onPress={onOpenAiBots}>
+        <View style={styles.settingSection}>
+          {visibleHeaderActions.map((action, index) => (
+            <View key={action.id ?? `header-action-${index}`} style={styles.headerActionItem}>
+              <TouchableOpacity onPress={action.onPress}>
                 <View style={styles.iconBackground}>
-                  <MaterialIcons name="smart-toy" size={25} color={theme.text} />
+                  {action.icon}
                 </View>
               </TouchableOpacity>
-            )}
-
-            {onOpenBots && (
-              <TouchableOpacity onPress={onOpenBots}>
-                <View style={styles.iconBackground}>
-                  <FontAwesome6 style={{ top: -1 }} size={20} name="robot" color={theme.text} />
-                </View>
-              </TouchableOpacity>
-            )}
-
-            {onOpenSettings && (
-              <TouchableOpacity onPress={onOpenSettings}>
-                <View style={styles.iconBackground}>
-                  <Ionicons size={24} name="settings-outline" color={theme.text} />
-                </View>
-              </TouchableOpacity>
-            )}
-          </View>
-        )}
+              {action.showDot && (
+                <View style={styles.headerActionDot} />
+              )}
+            </View>
+          ))}
+        </View>
       </View>
 
       {/* аватар */}
@@ -161,36 +107,24 @@ export default function PureProfileCard(props: PureProfileCardProps) {
       </TouchableOpacity>}
 
       {/* CTA */}
-      {isAuth && !isMe && (
+      {visibleCtaActions.length > 0 && (
         <View style={styles.buttonsRow}>
-          <TouchableOpacity style={[styles.btnPrimary, hideFollowBtn && { minWidth: '98%' }]} onPress={onMessage}>
-            <FontAwesome name="send" size={14} color={theme.white} />
-            <Text style={styles.btnPrimaryText}>Message</Text>
-          </TouchableOpacity>
-
-          {!hideFollowBtn && (
-            <TouchableOpacity style={styles.btnOutline} onPress={onFollowToggle}>
-              <FontAwesome5 name={isFollowing ? 'user-minus' : 'user-plus'} size={14} color={theme.primary} />
-              <Text style={styles.btnOutlineText}>{isFollowing ? 'Unfollow' : 'Follow'}</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      )}
-
-      {(isMe && onOpenCreatePoll || isMe && onOpenCreateEvent) &&(
-        <View style={styles.buttonsRow}>
-          {onOpenCreatePoll && (
-            <TouchableOpacity style={styles.btnOutline} onPress={onOpenCreatePoll}>
-              <Ionicons name="stats-chart-outline" size={20} color={theme.primary} />
-              <Text style={styles.btnOutlineText}>Create Poll</Text>
-            </TouchableOpacity>
-          )}
-          {onOpenCreateEvent && (
-            <TouchableOpacity style={styles.btnOutline} onPress={onOpenCreateEvent}>
-              <Octicons name="diff-added" size={20} color={theme.primary} />
-              <Text style={styles.btnOutlineText}>Create Event</Text>
-            </TouchableOpacity>
-          )}
+          {visibleCtaActions.map((action, index) => {
+            const isPrimary = (action.variant ?? 'outline') === 'primary';
+            return (
+              <TouchableOpacity
+                key={`${action.label}-${index}`}
+                style={[
+                  isPrimary ? styles.btnPrimary : styles.btnOutline,
+                  visibleCtaActions.length === 1 && styles.btnWide,
+                ]}
+                onPress={action.onPress}
+              >
+                {action.icon}
+                <Text style={isPrimary ? styles.btnPrimaryText : styles.btnOutlineText}>{action.label}</Text>
+              </TouchableOpacity>
+            );
+          })}
         </View>
       )}
 

package/components/Profile/ProfileCard/useProfileCardStyles.ts

@@ -19,12 +19,23 @@ export const useProfileCardStyles = () => {
     },
     navigation: { width: '100%' },
     settingSection: { flexDirection: 'row' },
+    headerActionItem: {
+      position: 'relative',
+    },
     iconBackground: {
       backgroundColor: theme.backgroundLight,
       height: 40, width: 40, borderRadius: 50,
       alignItems: 'center', justifyContent: 'center',
     },
-    dot: { backgroundColor: theme.danger, right: 5, top: 2 },
+    headerActionDot: {
+      position: 'absolute',
+      right: 5,
+      top: 2,
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: theme.danger,
+    },
     learnMoreText: { color: theme.placeholder, marginLeft: 5 },
 
     buttonsRow: {

package/components/Profile/index.ts

@@ -1,6 +1,6 @@
 export { ModalProfilePhoto } from './ModalProfilePhoto';
 export { default as ProfileCard } from './ProfileCard/ProfileCard';
-export type { PureProfileCardProps } from './ProfileCard/ProfileCard';
+export type { PureProfileCardProps, PureProfileCardCtaAction, PureProfileCardHeaderAction } from './ProfileCard/ProfileCard';
 export { default as ProfilePhotoBanner } from './ProfilePhotoBanner';
 export { default as ProfilePhotoUpload } from './ProfilePhotoUpload/ProfilePhotoUpload';
 export type { ProfilePhotoUploadProps } from './ProfilePhotoUpload/ProfilePhotoUpload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",